Html 有没有办法为 HTML5 的范围控件设置样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2979297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to style HTML5's range control?
提问by Ronald
Is there a way to style HTML5's range control? Is it possible to change the color of the line the slider slides on?
有没有办法为 HTML5 的范围控件设置样式？是否可以更改滑块滑动的线条的颜色？
回答by majman
Turns out, there is in webkit:
原来，在 webkit 中有：
input[type="range"]{
-webkit-appearance:none !important;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
}
You can then add whatever attributes you need to each those selectors. Background, gradient, etc...
然后，您可以为每个选择器添加您需要的任何属性。背景、渐变等...
Hope that helps!
希望有帮助！
回答by shakaran
A full example of css for customization (at this moment for webkit):
用于自定义的 css 的完整示例（此时为 webkit）：
input[type="range"]{
background: rgb(94, 30, 30);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}
input[type="range"]:hover{
background: rgb(194, 139, 131);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
width:25px;
height:15px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border:1px solid black;
background: #a90329;
background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
}
input[type="range"]::-webkit-slider-thumb:hover{
-webkit-appearance:none !important;
width:25px;
height:15px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background-color:rgb(56, 13, 13);
border:1px solid black;
background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );
}
回答by Sword I
On the top answer its already described. I just customize it on my way. Take a look its may help you.
在上面的答案中已经描述过。我只是在路上定制它。看看它可能对你有帮助。
Add below code on CSS:
在 CSS 上添加以下代码：
input:focus{
outline-color: transparent;
}
input[type="range"]{
-webkit-appearance:none;
-moz-apperance:none;
height: 6px;
background-color: #b6b6b6;
outline-color: transparent;
}
input::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:16px;
height:16px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
background-color: #20b373;
overflow: visible;
}
