如何设置HTML5范围输入的样式，使其在滑块前后具有不同的颜色？
我希望左侧为绿色，右侧为灰色。如上图所示将是完美的。最好是一个纯CSS解决方案（只需要担心WebKit）。
这样的事情可能吗？
纯CSS解决方案：
- Chrome：隐藏的溢出
input[range]，并用阴影颜色填充拇指剩余的所有空间。 - IE：无需重新发明轮子：
::-ms-fill-lower - Firefox无需重新发明轮子：
::-moz-range-progress
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
overflow: hidden;
width: 80px;
-webkit-appearance: none;
background-color: #9a905d;
}
input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: #13bba4;
margin-top: -1px;
}
input[type='range']::-webkit-slider-thumb {
width: 10px;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
background: #434343;
box-shadow: -80px 0 0 80px #43e5f7;
}
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: #43e5f7;
}
input[type="range"]::-moz-range-track {
background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
background-color: #43e5f7;
}
input[type="range"]::-ms-fill-upper {
background-color: #9a905d;
}<input type="range"/>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
设置垂直HTML5范围输入的样式
- 2
HTML5：如何创建具有动态值的“范围输入类型”？
- 3
jQuery的HTML5范围滑块输入值
- 4
如何设置html5日期输入的样式，第一个元素聚焦/有效
- 5
HTML5范围输入中的上下填充样式
- 6
Qml滑块样式，在滑块手柄前后分配不同的凹槽颜色
- 7
带有html5颜色输入的AngularJS-动态设置值
- 8
带有html5颜色输入的AngularJS-动态设置值
- 9
HTML5输入滑块未更新
- 10
具有输入或输入IN标签的HTML5结构标签
- 11
如何使用css3在html5中以不同的方式设置两个图像的样式
- 12
如何设置滑块的样式？
- 13
带有文字和不同颜色的圆形范围滑块
- 14
样式化HTML5数字输入
- 15
HTML5画布-alpha <1时，相同的RGBA样式产生不同的颜色
- 16
如何根据范围滑块中选择的值创建具有多个输入的动态 <div> ？
- 17
如何更改comboBoxEx Dotnetbar的颜色，因为窗体具有具有不同样式的StyleManager
- 18
HTML5颜色输入无法打开
- 19
jQuery HTML5范围滑块中的实时输出
- 20
Ember的HTML5范围输入
- 21
对范围输入禁用HTML5拖放
- 22
为什么像素颜色在编码前后会有所不同？，如何设置相同？
- 23
JSX React HTML5输入滑块不起作用
- 24
翻转范围/滑块输入html
- 25
翻转范围/滑块输入html
- 26
在 html 中设置范围滑块
- 27
情节：如何为每个变量创建具有不同样式和颜色的折线图？
- 28
如何使用html范围输入（滑块）更改画布的线宽？
- 29
父元素（作用域）上的HTML5范围样式
我来说两句