拇指前的样式输入范围背景
问题描述:
我想在范围输入上使用不同颜色的拇指样式。我尝试过寻找解决方案,但我还没有找到合适的解决方案。这是我需要它的样子:拇指前的样式输入范围背景
铬似乎不再支持input[type='range']::-webkit-slider-thumb:before
了,我不知道如何设计它。这是我到目前为止有:
input[type='range'] {
min-width: 100px;
max-width: 200px;
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: @white;
border: 1px solid @gray-4;
height: 14px;
width: 14px;
&:hover,
&:focus,
&:active {
border-color: @blue;
background-color: @gray-2;
}
}
&::-webkit-slider-runnable-track {
background-color: @gray-2;
border: 1px solid @gray-4;
}
}
答
通过shambalambala引用在后的诀窍是聪明,但我不认为它会在这种情况下工作,如果你想要得到的东西看起来完全一样的图像,你显示。方法是在拇指上放一个阴影,以在拇指左侧创建不同的颜色。由于阴影沿垂直方向和水平方向延伸,因此还必须将overflow:hidden
添加到范围或轨道以剪切阴影。不幸的是,这也夹住了大拇指。因此,如果您想在垂直方向上延伸超出轨道的拇指,例如在图像中显示拇指是直径大于轨道宽度的圆的位置,则这不起作用。
我不确定这个问题有一个纯粹的CSS解决方案。使用JavaScript,解决这个问题的一个方法是使两个范围元素完全重叠。对于一个范围元素,您只会看到拇指,而您只能看到该轨道。您可以使用轨道元素上的阴影方法在拇指之前获取不同的颜色。您可以根据需要在拇指范围内设置拇指的风格,并且由于此范围元素的overflow
未设置为hidden
,所以它可以延伸超出轨道的宽度。然后,您可以使用JavaScript将两个范围元素连接在一起,以便当您将拇指移动到thumb-visible元素上时,track-visible元素的值也会发生变化。
例如(在WebKit浏览器工程 - 将需要为其他浏览器一些额外的造型):
<html>
<head>
<style>
.styled_range {
position: relative;
padding: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 600px;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12px;
}
.track_range {
pointer-events: none;
}
.track_range::-webkit-slider-runnable-track {
background: #D0D0D0;
border-radius: 6px;
overflow: hidden;
}
.track_range::-webkit-slider-thumb {
-webkit-appearance: none;
background: transparent;
height: 1px;
width: 1px;
box-shadow: -600px 0 0 600px #666666;
}
.thumb_range::-webkit-slider-runnable-track {
background: transparent;
cursor: pointer;
}
.thumb_range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid #ffffff;
border-radius: 20px;
height: 40px;
width: 40px;
background: #1180AD;
cursor: pointer;
margin: -12px 0px 0px 0px;
}
</style>
</head>
<body>
<form>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
<br/>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
</form>
</body>
<script>
window.onload = function() {
var styledRanges = document.getElementsByClassName('styled_range');
for (var i=0; i<styledRanges.length; i++) {
var thumbRange = null, trackRange = null;
for (var j=0; j<styledRanges[i].children.length; j++) {
var child = styledRanges[i].children[j];
if (child.className === 'thumb_range')
var thumbRange = child;
else if (child.className === 'track_range')
var trackRange = child;
}
thumbRange.oninput = function(thumbRange, trackRange) {
return function(e) {
trackRange.value = thumbRange.value;
};
}(thumbRange, trackRange);
}
}
</script>
</html>
[这个其他堆栈溢出问题(http://*.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider)有一个很好的答案。 –
[如何设置HTML5范围输入以在滑块之前和之后具有不同的颜色?](http://*.com/questions/18389224/how-to-style-html5-range-input-to-have-不同颜色-之前和之后的滑动件) – shaochuancs