Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

标准是否允许带刻度线的范围样式？或者我应该在那里偷拍图像并将其调用完成？

Answer 1

我能够通过使-slider-runnable-track-的背景颜色与包含元素的背景相同来破解它。请注意，我只包含-webkit- browsers的代码。其他浏览器非常明显：

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/

Answer 2

请像这样使用

input[type="range"]

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

使用刻度线输入[type = range]样式

2 个答案: