Question

我使用Materialize CSS，我的表单中有一个范围 - 滑块。当你点击它时，我想让子弹改变颜色和大小。但是，我无法使其发挥作用。这是我尝试做的事情：

<p class="range-field"><input type="range" id="years" min="17" max="30" /></p>

    input[type="range"]::-moz-range-thumb {
    background: none repeat scroll 0 0 #277F31;
    border: medium none;
    border-radius: 50%;
    height: 14px;
    margin-top: -5px;
    width: 14px;
    }

    input[type="range"]:active:-moz-range-thumb {
    background: none repeat scroll 0 0 black;
    border: medium none;
    border-radius: 50%;
    height: 24px;
    margin-top: -5px;
    width: 24px;
    }

然而，CSS上的active在这里不起作用。我也尝试了焦点，但仍然没有。

Answer 1

这是因为您应该对伪元素使用双冒号表示法（例如滑块拇指），就像在第一个选择器中一样：

input[type="range"]:active::-moz-range-thumb
                          ^^
                         two colons here

不要忘记跨浏览器兼容性

::-webkit-slider-thumb /* for webkit based browsers */
::-ms-thumb /* Internet explorer 10+ */

Answer 2

您总是可以使用jQuery解决方案吗？

$('#bullet-id').mousedown(function() {
    $(this).css('background-color', 'red');
});
$('#bullet-id').mouseup(function() {
    $(this).css('background-color', 'blue');
});

如果你这样做，那么值得确保你抓住鼠标输出事件以重置回原来的CSS。

单击滑块时更改滑块点的颜色

2 个答案: