range.css 989 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. input[type=range] {
  2. -webkit-appearance: none;
  3. /*margin-left: 10px;*/
  4. display: initial;
  5. border-radius: 5px;
  6. /*这个属性设置使填充进度条时的图形为圆角*/
  7. background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
  8. background-size: 0% 100%;
  9. padding: 0px;
  10. }
  11. input[type=range]::-webkit-slider-thumb {
  12. -webkit-appearance: none;
  13. }
  14. input[type=range]::-webkit-slider-runnable-track {
  15. height: 6px;
  16. border-radius: 5px;
  17. /*将轨道设为圆角的*/
  18. box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
  19. /*轨道内置阴影效果*/
  20. }
  21. input[type=range]:focus {
  22. outline: none;
  23. }
  24. input[type=range]::-webkit-slider-thumb {
  25. -webkit-appearance: none;
  26. height: 10px;
  27. width: 10px;
  28. margin-top: -2px;
  29. /*使滑块超出轨道部分的偏移量相等*/
  30. background: #ffffff;
  31. border-radius: 50%;
  32. /*外观设置为圆形*/
  33. border: solid 0.125em rgba(205, 224, 230, 0.5);
  34. /*设置边框*/
  35. box-shadow: 0 .125em .125em #3b4547;
  36. /*添加底部阴影*/
  37. }