html5更改range中圆点,把自定义样式应用到HTML 5中的range元素实现方法

这篇文章主要为大家详细介绍了把自定义样式应用到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

您可能感兴趣的文章