这篇文章主要为大家详细介绍了把自定义样式应用到HTML 5中的range元素实现方法,具有一定的参考价值,可以用来参考一下。
能不能把自定义样式应用到HTML 5中的range元素上。晚上研究了一下,是可以实现上述的需求的。请用Chrome查看Demo。代码如下: html代码如下:
自定義樣式的input[type=range]#range {
width: 600px;
height: 10px;
background: rgba(60, 114, 230, .8);
border: 1px solid #333;
-webkit-border-radius: 5px;
-webkit-appearance: none !important;
}
#range::-webkit-slider-thumb{
width: 28px;
height: 28px;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#fff),
to(#ccc)
);
border: 1px solid #000;
-webkit-box-shadow: 0 0 6px #000;
-webkit-border-radius: 14px;
-webkit-appearance: none !important;
}
#result {
border: 2px solid #ccc;
width: 32px;
}
var result = document.getElementById('result');
document.getElementById('range').onchange = function() {
result.value = this.value;
}
代码中的”-webkit-appearance: none !important”很重要,要先把-webkit-appearance设置为none才能自定义样式。
注:关于把自定义样式应用到HTML 5中的range元素实现方法的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。
关键词:自定义样式,range
您可能感兴趣的文章