Question

I am working on a tool to preview fonts on a website. For this tool, I want to use <input type="range" /> to change the font size in a textarea. Since I don’t like the default WebKit rendering of the slider and the handler, I customized them using CSS. While the page renders fine in Safari, Chrome does not display the slider handle (Sliders on other websites render fine, though). What do I have to change to make it work in Chrome as well?

The HTML

<input type="range" min="6" max="70" value="22" id="font-1-size" />

The CSS

.tester-option.font-size input
{
    -webkit-appearance: none !important;
    background: #cecece;
    height: 1px;
    width: 425px;
    -webkit-transform: translate3d(0px, 0px, 0px);
    margin-top: 10px;
    cursor: pointer;
}

.tester-option.font-size input::-webkit-slider-thumb
{
    -webkit-appearance: none !important;
    background: #666;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

You can find the live example here: http://fishnation.de/development/26plus/#test-font

P.S. I am aware that there is jQuery UI, but I want to replace as few elements as possible.

Answer 1

Try changing your selector. I used #font-1-size::-webkit-slider-thumb. This worked fine in chrome.