html - input[type=range] 带有刻度线的样式

Question

这是 Ticks for type=“range” HTML input 的后续问题.在 CSS-Tricks，他们描述了一种跨浏览器样式化 type=range 输入的方法，Styling Cross-Browser Compatible Range Inputs with CSS ，效果很好……除了 CSS，

input[type=range] {
  appearance: none;/*does not validate*/
  -o-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;/*kills tick marks*/
}

<div>
  <input type="range" list="Z">
  <datalist id="Z">
    <option>10</option>
    <option>20</option>
    <option>30</option>
    <option>40</option>
    <option>50</option>
    <option>60</option>
    <option>70</option>
    <option>80</option>
    <option>90</option>
    <option>100</option>
    <option>110</option>
  </datalist>
</div>

将杀死标记定义的任何刻度。

<div>
  <input type="range" list="Z">
  <datalist id="Z">
    <option>10</option>
    <option>20</option>
    <option>30</option>
    <option>40</option>
    <option>50</option>
    <option>60</option>
    <option>70</option>
    <option>80</option>
    <option>90</option>
    <option>100</option>
    <option>110</option>
  </datalist>
</div>

标准是否允许范围样式带有刻度线？还是我应该把一张图片硬塞进去然后就完成了？

Answer 1

我能够通过使 -slider-runnable-track- 的背景颜色与包含元素的背景颜色相同来破解它。请注意，我只包含了 -webkit- 浏览器的代码。其他浏览器将是不言自明的:

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: rgb(255,255,255);
}

这会隐藏滑动条但保留刻度线。

这是 fiddle :https://jsfiddle.net/ffp8ner5/