美化<input type="range">控制元件程式碼例項

螞蟻小編發表於2017-02-26
控制元件
本章節分享一段程式碼例項，它實現了美化<input type="range">控制元件的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>螞蟻部落</title>
<style>
input[type=range] {   
  -webkit-appearance: none;   
  margin: 18px 0;   
  width: 100%;   
}   
input[type=range]:focus {   
  outline: none;   
}   
input[type=range]::-webkit-slider-runnable-track {   
  width: 100%;   
  height: 8.4px;   
  cursor: pointer;   
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
  background: #3071a9;   
  border-radius: 1.3px;   
  border: 0.2px solid #010101;   
}   
input[type=range]::-webkit-slider-thumb {   
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
  border: 1px solid #000000;   
  height: 36px;   
  width: 16px;   
  border-radius: 3px;   
  background: #ffffff;   
  cursor: pointer;   
  -webkit-appearance: none;   
  margin-top: -14px;   
}   
input[type=range]:focus::-webkit-slider-runnable-track {   
  background: #367ebd;   
}   
input[type=range]::-moz-range-track {   
  width: 100%;   
  height: 8.4px;   
  cursor: pointer;   
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
  background: #3071a9;   
  border-radius: 1.3px;   
  border: 0.2px solid #010101;   
}   
input[type=range]::-moz-range-thumb {   
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
  border: 1px solid #000000;   
  height: 36px;   
  width: 16px;   
  border-radius: 3px;   
  background: #ffffff;   
  cursor: pointer;   
}   
input[type=range]::-ms-track {   
  width: 100%;   
  height: 8.4px;   
  cursor: pointer;   
  background: transparent;   
  border-color: transparent;   
  border-width: 16px 0;   
  color: transparent;   
}   
input[type=range]::-ms-fill-lower {   
  background: #2a6495;   
  border: 0.2px solid #010101;   
  border-radius: 2.6px;   
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
}   
input[type=range]::-ms-fill-upper {   
  background: #3071a9;   
  border: 0.2px solid #010101;   
  border-radius: 2.6px;   
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
}   
input[type=range]::-ms-thumb {   
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
  border: 1px solid #000000;   
  height: 36px;   
  width: 16px;   
  border-radius: 3px;   
  background: #ffffff;   
  cursor: pointer;   
}   
input[type=range]:focus::-ms-fill-lower {   
  background: #3071a9;   
}   
input[type=range]:focus::-ms-fill-upper {   
  background: #367ebd;   
}  
</style>
</head>
<body>
<input type="range" style="width:200px;">
</body>
</html>

相關文章