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

【问题标题】：input[type=range] styling with tick marksinput[type=range] 带有刻度线的样式
【发布时间】：2016-03-31 02:23:00
【问题描述】：

这是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>

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

【问题讨论】：

标签： html css

【解决方案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);
}

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

这里是小提琴：https://jsfiddle.net/ffp8ner5/

【讨论】：

这不是解决此问题的实际方法，问题是我们确实希望将默认外观保持为无并且仍然看到刻度.. 但看起来这是不可能的
没关系，我必须使用 CSS 伪元素手动完成，全部使用 ::after {}，现在看起来超级好...
@msqar 你能举个例子吗？
@1.21gigawatts 嘿，对不起，我现在没有代码，我在一年前发布了它。但是我通过使用伪元素 CSS 修复了 AFAIR，你需要一个工作示例吗？我可能会尝试搜索它。

【解决方案2】：

请这样使用

input[type="range"]

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

【讨论】：

那会做什么，怎么做？
我的 CSS lints 完好无损。