软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 自定义样式的input[type=range]

自定义样式的input[type=range]

今天下午有人在群里提出个问题,能不能把自定义样式应用到HTML 5中的range元素上。晚上研究了一下,是可以实现上述的需求的。请用Chrome查看Demo

代码如下:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>自定義樣式的input[type=range]</title>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<input type='range' min='0' max='1000' value='0' id='range' />
<input type='text' id='result'/>
<script type='text/javascript'>
var result = document.getElementById('result');
document.getElementById('range').onchange = function() {
result.value = this.value;
}
</script>
</body>
</html>

代码中的”-webkit-appearance: none !important”很重要,要先把-webkit-appearance设置为none才能自定义样式。

作者:周明智
出处:http://www.ued163.com/?p=1286

上一篇:CSS3创建多重边框
下一篇:HTML5-Canvas
    相关阅读
    网友评论
    栏目导航
    推荐软件