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

【问题标题】：Change the color of a slider's point when click on it单击滑块时更改滑块点的颜色
【发布时间】：2015-01-06 13:34:40
【问题描述】：

我使用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 在这里不起作用。我也尝试过专注，但仍然没有。

【问题讨论】：

标签： html css materialize

【解决方案1】：

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

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

不要忘记跨浏览器兼容性

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

【讨论】：

我怎么错过了...非常感谢。当它可用时我会接受你的答案:)
这不是 CSS2 与 CSS3 的区别。在 CSS3 中，: 是伪类的符号，:: 是伪元素的符号。你是对的，虽然-moz-range-thumb 是一个伪元素，但应该有一个::。

【解决方案2】：

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

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

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

【讨论】：