css - 如何使用 CSS 自定义 HTML5 输入范围类型外观？

Question

我想在 HTML5 中自定义范围输入类型的外观，使其看起来像一个进度条。我已经尝试使用 CSS 类应用一些常见的 CSS 属性，但它们似乎不起作用。

谁能指导我如何自定义它？

Answer 1

input[type='range'] {
    -webkit-appearance: none !important;
    background:red;
    height:7px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:blue;
    height:10px;
    width:10px;
}