1

我使用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;
    }

但是，activeon CSS 在这里不起作用。我也尝试过专注，但仍然没有。

4

2 回答 2

2

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

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

不要忘记跨浏览器兼容性

::-webkit-slider-thumb /* for webkit based browsers */
::-ms-thumb /* Internet explorer 10+ */
于 2015-01-06T13:42:50.087 回答
0

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

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

如果你这样做，那么确保你捕捉到鼠标退出事件以重置回原始 CSS 是值得的。

于 2015-01-06T13:40:36.657 回答