html – 之前和之后的样式输入范围

前端之家收集整理的这篇文章主要介绍了html – 之前和之后的样式输入范围前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我在css-Tricks中遵循this method来设置输入范围的样式,并尝试使用前后伪类.以下是我尝试过的代码

  1. input[type=range]::-webkit-slider-thumb:before {
  2. background: #fff;
  3. }

这似乎没有办法.有人可以帮助我如何设置滑块轨道的样式.我需要一个纯CSS解决方案.基本上我想要它到look like this.

我还将粘贴css-Tricks的代码

  1. input[type=range] {
  2. -webkit-appearance: none;
  3. margin: 18px 0;
  4. width: 100%;
  5. }
  6. input[type=range]:focus {
  7. outline: none;
  8. }
  9. input[type=range]::-webkit-slider-runnable-track {
  10. width: 100%;
  11. height: 8.4px;
  12. cursor: pointer;
  13. animate: 0.2s;
  14. Box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
  15. background: #3071a9;
  16. border-radius: 1.3px;
  17. border: 0.2px solid #010101;
  18. }
  19. input[type=range]::-webkit-slider-thumb {
  20. Box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
  21. border: 1px solid #000000;
  22. height: 36px;
  23. width: 16px;
  24. border-radius: 3px;
  25. background: #ffffff;
  26. cursor: pointer;
  27. -webkit-appearance: none;
  28. margin-top: -14px;
  29. }
  30. input[type=range]:focus::-webkit-slider-runnable-track {
  31. background: #367ebd;
  32. }
  33. input[type=range]::-moz-range-track {
  34. width: 100%;
  35. height: 8.4px;
  36. cursor: pointer;
  37. animate: 0.2s;
  38. Box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
  39. background: #3071a9;
  40. border-radius: 1.3px;
  41. border: 0.2px solid #010101;
  42. }
  43. input[type=range]::-moz-range-thumb {
  44. Box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
  45. border: 1px solid #000000;
  46. height: 36px;
  47. width: 16px;
  48. border-radius: 3px;
  49. background: #ffffff;
  50. cursor: pointer;
  51. }
  52. input[type=range]::-ms-track {
  53. width: 100%;
  54. height: 8.4px;
  55. cursor: pointer;
  56. animate: 0.2s;
  57. background: transparent;
  58. border-color: transparent;
  59. border-width: 16px 0;
  60. color: transparent;
  61. }
  62. input[type=range]::-ms-fill-lower {
  63. background: #2a6495;
  64. border: 0.2px solid #010101;
  65. border-radius: 2.6px;
  66. Box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
  67. }
  68. input[type=range]::-ms-fill-upper {
  69. background: #3071a9;
  70. border: 0.2px solid #010101;
  71. border-radius: 2.6px;
  72. Box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
  73. }
  74. input[type=range]::-ms-thumb {
  75. Box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
  76. border: 1px solid #000000;
  77. height: 36px;
  78. width: 16px;
  79. border-radius: 3px;
  80. background: #ffffff;
  81. cursor: pointer;
  82. }
  83. input[type=range]:focus::-ms-fill-lower {
  84. background: #3071a9;
  85. }
  86. input[type=range]:focus::-ms-fill-upper {
  87. background: #367ebd;
  88. }
最佳答案
它可能在Firefox和IE中 –

  1. // Mozilla
  2. input[type="range"]::-moz-range-progress {
  3. background: #cc1a1a;
  4. height: 12px;
  5. border-radius: 12px;
  6. }
  7. // IE
  8. input[type="range"]::-ms-fill-lower {
  9. background: #CC1A1A;
  10. border: 0 solid #000101;
  11. border-radius: 50px;
  12. Box-shadow: 0 0 0 #000000,0 0 0 #0d0d0d;
  13. }
  14. input[type="range"]::-ms-fill-upper {
  15. background: #c0c0c0;
  16. border: 0 solid #000101;
  17. border-radius: 50px;
  18. Box-shadow: 0 0 0 #000000,0 0 0 #0d0d0d;
  19. }

Chrome只有一种方式:之前和之后,不再支持(自2016年3月起).我找到的最好的 – 是http://rangeslider.js.org/.它也适用于Angular JS – https://github.com/danielcrisp/angular-rangeslider

猜你在找的HTML相关文章