自定义样式的input[type=range]
发布时间：2018-10-29 16:11:21 所属栏目：经验 来源：站长网
导读：今天下午有人在群里提出个问题，能不能把自定义样式应用到HTML 5中的range元素上。晚上研究了一下，是可以实现上述的需求的。请用 Chrome 查看Demo。 代码如下： Copy to Clipboard 引用的内容：[www.veryhuo.com]!DOCTYPE html html head meta http-equiv
|
今天下午有人在群里提出个问题，能不能把自定义样式应用到HTML 5中的range元素上。晚上研究了一下，是可以实现上述的需求的。请用Chrome查看Demo。 代码如下： Copy to Clipboard 引用的内容：[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才能自定义样式。 作者：周明智 （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
