我想自定义输入类型范围,如
this.
我尝试使用以下代码更改拇指,如下所示,但未更改选定的范围颜色.
HTML：
<input type="range" />
CSS：
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 10px;
background: red;
cursor: pointer;
border: none;
margin-top: -8px;
}
input[type=range] {
-webkit-appearance: none;
outline: 0;
margin: 0;
padding: 0;
height: 30px;
width: 100%;
}
有人可以建议我改变选定的可运行轨道背景颜色吗？
解决方法
Ionic框架使用有趣的方法仅使用CSS来设置范围输入轨道的样式.他们将:: before伪元素添加到:: – webkit-slider-thumb,使其尽可能宽,然后将其放置在轨道顶部. (我无法使用border-radius来处理它.)
input[type='range'] {
width: 210px;
height: 30px;
overflow: hidden;
cursor: pointer;
}
input[type='range'],input[type='range']::-webkit-slider-runnable-track,input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 200px;
height: 10px;
background: #AAA;
}
input[type='range']::-webkit-slider-thumb {
position: relative;
height: 30px;
width: 30px;
margin-top: -10px;
background: steelblue;
border-radius: 50%;
border: 2px solid white;
}
input[type='range']::-webkit-slider-thumb::before {
position: absolute;
content: '';
height: 10px; /* equal to height of runnable track */
width: 500px; /* make this bigger than the widest range input element */
left: -502px; /* this should be -2px - width */
top: 8px; /* don't change this */
background: #777;
}
<div class="container"> <input type="range" min="0" max="100" value="10" /> </div>
据我所知,对于Webkit驱动的浏览器(和FF),没有纯CSS方法可以做到这一点. IE提供了一种使用-ms-fill-lower和-ms-fill-upper为轨道的两个部分设置样式的方法,但在WebKit中没有等效项,因此需要JavaScript.
您可以使用线性渐变作为可运行轨道的背景图像,然后使用JavaScript更改背景大小以实现所需的效果.由于问题是针对Webkit的,因此提供的代码段目前仅适用于Webkit驱动的浏览器.此方法允许我们向轨道添加边界半径.
这个片段改编自Ana Tudor的CodePen Demo.该演示还有一些方法可以让它在其他浏览器中运行.
window.onload = function() {
var input = document.querySelector('input[type=range]'),style_el = document.createElement('style'),styles = [],track_sel = ['::-webkit-slider-runnable-track'];
document.body.appendChild(style_el);
styles.push('');
input.addEventListener('input',function() {
var min = this.min || 0,max = this.max || 100,c_style,u,edge_w,val,str = '';
this.setAttribute('value',this.value);
val = this.value + '% 100%';
str += 'input[type="range"]' + track_sel[0] + '{background-size:' + val + '}';
styles[0] = str;
style_el.textContent = styles.join('');
},false);
}
input[type='range'] {
width: 210px;
height: 50px;
cursor: pointer;
}
input[type='range'],input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 200px;
height: 10px;
background: linear-gradient(to right,#777,#777),#AAA;
background-size: 10% 100%;
background-repeat: no-repeat;
border-radius: 5px;
}
input[type='range']::-webkit-slider-thumb {
height: 30px;
width: 30px;
margin-top: -10px;
background: steelblue;
border-radius: 50%;
border: 2px solid white;
}
<div class="container"> <input type="range" min="0" max="100" value="10" /> </div>
