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

Question

这是Ticks for type="range" HTML input的后续问题。在 CSS-Tricks 中，他们描述了一种跨浏览器样式type=range输入的方法，使用 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

请像这样使用

input[type="range"]

http://www.w3schools.com/css/css_attribute_selectors.asp