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

I use Materialize CSS and I have a range - slider in my form. I want to make the bullet changing a color and size when you click on it. But, I cannot make it work. Here is what I try to do:

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

However, the active on CSS doesn't work here. I tried also with focus but still nothing.

但是,CSS上的活动在这里不起作用。我也尝试了焦点,但仍然没有。

2 个解决方案

#1

This is because you should use the double colon notation for pseudo elements (eg slider thumb), like in your first selector :

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

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

don't forget about the cross browser compatibility

不要忘记跨浏览器的兼容性

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

#2

You could always use a jQuery solution?

你总是可以使用jQuery解决方案吗?

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

If you do this, would be worth making sure you catch the mouse out events to reset back to the original CSS also.

如果你这样做,值得确保你抓住鼠标输出事件重置回原来的CSS也是如此。

#1