How to set content to -webkit-slider-thumb


Tags: css,css3,safari,webkit

Problem :

I have a Input of type range

<input id="counter" type="range" min="0" ></input>

with following css

#counter {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:10px;
    border-radius:50px;
    border-color:rgb(240, 61, 37);
}

#counter::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:15px;
    height:15px;
    border-radius:50px;
    content:"1";
    background:rgb(240, 61, 37);
    opacity:0.95;
}

Live Demo here

content:"1"; of css is not working at all, how to set some text to red color knob in output.



Solution :

::-webkit-slider-thumb cannot accept the content property. Try setting a background image, instead.


    CSS Howto..

    Creating a responsive drupal 7 slideshow

    How to make background images clickable (javascript or css)

    How to create square around glyphicon bootstrap?

    How to Toggle CSS3 Accordion on Click

    How to design WPF in HTML, CSS and JavaScript

    How to top-level a rich:panelMenu with it's rich:outputPanel with an h:panelGrid?

    CSS: How to vertically align elements inside div with display: table-cell

    How to make CSS border show on radio button click

    How to resize image according from screen resolution on html css

    Bootstrap - How to make text wrap around an image on small devices?

    How to make text go over a CSS background img

    How to validate HTML/CSS running in localhost?

    How do you change the appearance of a button in javascript?

    How can I change the style of thumbnails?

    How to get css div to stretch to 100% of window

    How do I position divs inside header?

    How do I add an image to a progress bar in HTML/CSS?

    How to find out DOM and CSS address to an element for Selenium?

    SCSS / Sass: How do i change a mixin to output specific CSS?

    How to override css for giving background image?

    How to center text over an image in a table using javascript, css, and/or html?

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How to begin typing from vertical middle of textarea

    How to always make page content appear beneath navigation bar?

    How do I make sure my text stays on same line when I add a 'space' inside
  • element?
  • How to document a webpage HTML and CSS using comments [closed]

    How to get custom css to load after richfaces?

    How does Apple position its slideshow inside a fixed-position box?

    How to keep an element :active even after clicking

    How to adjust the height of a series of DIVs by CSS