输入范围处理程序不在Chrome中呈现

Question

我正在研究一种在网站上预览字体的工具。对于此工具，我想使用<input type="range" />更改textarea中的字体大小。由于我不喜欢滑块和处理程序的默认WebKit渲染，我使用CSS自定义它们。虽然页面在Safari中渲染得很好，但Chrome不会显示滑块手柄（但其他网站上的滑块渲染效果很好）。我还需要做些什么才能让它在Chrome中运行？

HTML

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

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;
}

您可以在此处找到实时示例：http://fishnation.de/development/26plus/#test-font

P.S。我知道有jQuery UI，但我希望尽可能少地替换元素。

Answer 1

尝试更改选择器。我用了#font-1-size::-webkit-slider-thumb。这在chrome中工作得很好。