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

Question

我正在开发一种在网站上预览字体的工具。对于这个工具，我想使用 <input type="range" />更改文本区域中的字体大小。因为我不喜欢 slider 和处理程序的默认 WebKit 渲染，所以我使用 CSS 自定义了它们。虽然该页面在 Safari 中呈现良好，但 Chrome 不显示 slider 句柄(但其他网站上的 slider 呈现良好)。我必须更改什么才能使其在 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

附言我知道有 jQuery UI，但我想替换尽可能少的元素。

Answer 1

尝试更改您的选择器。我使用了 #font-1-size::-webkit-slider-thumb。这在 Chrome 中运行良好。