类型=“范围” HTML输入的提示

Question

我想知道是否可以在Chrome和Firefox中显示刻度线以type="range"输入数字？我在这个问题上能找到的最接近的东西是这个。

Answer 1

当涉及到样式时，输入范围仍然有些噩梦。这就是说，在各大浏览器中显示刻度线 是 可能的，有点苦劳和浏览器的特定解决方案。

Internet Explorer / Edge

如您所知，默认情况下，如果添加HTML step属性，Internet Explorer将显示刻度。在各种奇怪的事件中，Internet
Explorer和Edge可以说是设置输入范围样式时最灵活的浏览器。

<input type="range" min="0" max="100" step="25">

Chrome / Safari

在Chrome和其他Webkit浏览器（包括Safari）中，您可以使用datalist元素在滑块上提供一组自定义的刻度位置。尽管所有主要的浏览器都支持此元素，但Firefox（和其他Gecko浏览器）不会显示可见的刻度线。

<input type="range" min="0" max="100" step="25" list="steplist">

<datalist id="steplist">

    <option>0</option>

    <option>25</option>

    <option>50</option>

    <option>75</option>

    <option>100</option>

</datalist>

火狐浏览器

在Firefox和其他基于Gecko的浏览器中，我们需要使用一些特定于供应商的CSS来添加刻度线。您必须对此进行自定义，以使其看起来最自然。在此示例中，我使用了水平重复渐变来添加看起来像刻度线的“垂直条纹”，但是您也可以使用背景图像或任何其他样式。您甚至可以使用一些Javascript从datalist元素中加载信息，然后生成适当的渐变并将其应用于该元素，以便所有这些都自动发生，从而可以支持自定义任意停止。

input[type="range"]::-moz-range-track {

  padding: 0 10px;

  background: repeating-linear-gradient(to right,

    #ccc,

    #ccc 10%,

    #000 10%,

    #000 11%,

    #ccc 11%,

    #ccc 20%);

}


<input type="range" min="0" max="100" step="25" list="steplist">

<datalist id="steplist">

    <option>0</option>

    <option>25</option>

    <option>50</option>

    <option>75</option>

    <option>100</option>

</datalist>

兼容性说明：如注释中所述，某些浏览器不支持数据列表。根据这些浏览器处理不受支持/无法识别的元素的方式，这可能会导致浏览器在范围输入下方以纯文本形式显示选项值。如果定位到尽可能广泛的浏览器对您很重要，那么这可能是个问题。

一种解决方案是repeating-linear-gradient，除了使用壁虎浏览器之外，还对Webkit浏览器使用笨拙的合并，然后完全删除数据列表。

另一种解决方案是使用CSS将数据列表显式设置为display: none。该解决方案可能是最可取的，因为您不会损害提供旧版支持的功能。