把自定义样式应用到HTML 5中的range元素实现方法

内容摘要
这篇文章主要为大家详细介绍了把自定义样式应用到HTML 5中的range元素实现方法，具有一定的参考价值，可以用来参考一下。

能不能把自定义样式应用到HTML 5中的range元素上。晚
文章正文

这篇文章主要为大家详细介绍了把自定义样式应用到HTML 5中的range元素实现方法，具有一定的参考价值，可以用来参考一下。

能不能把自定义样式应用到HTML 5中的range元素上。晚上研究了一下，是可以实现上述的需求的。请用Chrome查看Demo。代码如下： html代码如下： 

<!--   来自 php教程 （www.idcnote.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才能自定义样式。

注：关于把自定义样式应用到HTML 5中的range元素实现方法的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇去掉inline-block元素之间水平空白的功能实例下一篇python解决中文编码错误问题

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！