Question

input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none !important;width:20px;height:20px;border-radius: 8px;-moz-border-radius: 8px; -webkit-border-radius: 8px;cursor: pointer;background: url('../img/gripper.png') no-repeat;}

input[type="range"]{background-color: #B4B4B4;-webkit-appearance: none;border-radius: 8px;  -moz-border-radius: 8px;-wekkit-border-radius: 8px;}

使用上面我可以设置样式范围元素，但我想改变图像高度＆amp;宽度使用jQuery。

$('input[type="range"]::-webkit-slider-thumb').css('width','100px');

无效。

我想给范围的路径提供两种不同的颜色，如

input[type="range"]::-ms-fill-upper {background-color: #000;}
input[type="range"]::-ms-fill-lower {background-color: #B4B4B4;}

Answer 1

如果您想使用Javascript进行样式设置，最灵活的方法是分配一个类：

$('input[type="range"]').addClass('range');

CSS：

.range {
    background-color: #B4B4B4;
    -webkit-appearance: none;
    border-radius: 8px;
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    cursor: pointer;
    background: url('../img/gripper.png') no-repeat;
}

另请注意，您不需要border-radius的供应商前缀。

如何使用javascript覆盖范围元素的样式

1 个答案: