type =“range”的诀窍HTML输入 [英] Ticks for type="range" HTML input

问题描述

阅读这个后，我想知道是否可以在Chrome和Firefox中显示a type =range数字输入？我可以找到的关于这个主题的最近的事情是这。

解决方案

输入范围仍然是一个噩梦的黑客，当谈到造型。也就是说，在主要浏览器上显示刻度是可能的，有一点肘部润滑脂和浏览器特定的解决方案。

---

Internet Explorer

您似乎知道，如果您添加HTML step 属性。在一个奇怪的事件的扭曲，Internet Explorer可以说是最灵活的浏览器，当它涉及到样式输入范围。

 < input type = rangemin =0max =100step =25>  

Chrome / Safari

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

 < input type = rangemin =0max =100step =25list =steplist>< datalist id =steplist> < option> 0< / option> < option> 25< / option> < option> 50< / option> < option> 75< / option> < option> 100< / option>< / datalist>  

Firefox

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

  input [type =range] ::  -  moz-range-track {padding：0 10px;背景：重复线性渐变（向右，#ccc，#ccc 10％，＃000 10％，＃000 11％，#ccc 11％，#ccc 20％）;}  pre> 
 < input type =rangemin =0max =100step = 25list =steplist>< datalist id =steplist> < option> 0< / option> < option> 25< / option> < option> 50< / option> < option> 75< / option> < option> 100< / option>< / datalist>  
 

---

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

一个解决方案是使用尴尬的重复线性

另一种解决方案是使用CSS显式地显示将datalist设置为 display：none 。此解决方案可能是最可取的，因为您不会妥协功能以提供旧版支持。

After reading this I was wondering if it is possible to show ticks in Chrome and Firefox for a type="range" number input? The closest thing I could find on this subject is this.

解决方案

Input ranges are still a bit of a nightmarish hack when it comes to styling. That said, displaying tickmarks on major browsers is possible, with a bit of elbow grease and browser-specific solutions.

---

Internet Explorer

As you seem to be aware, Internet Explorer will show ticks by default if you add the HTML step attribute. In a weird twist of events, Internet Explorer is arguably the most flexible browser when it comes to styling input ranges.

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

Chrome / Safari

In Chrome and other Webkit browsers (including Safari), you can use the datalist element to provide a custom set of tick locations on the slider. While all major browsers support this element, Firefox (and other Gecko browsers) won't show visible tick marks.

<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

In Firefox and other Gecko-based browsers, we'll need to use some vendor-specific CSS to add the tick marks. You'll have to customize this to whatever looks the most natural to you. In this example, I've used a horizontal repeating gradient to add "vertical stripes" that look like tick marks, but you could also use a background image, or any other style you want. You could even use a bit of Javascript to load information from the datalist element, then generate an appropriate gradient and apply it to the element so that it all happens automatically, and so it can support custom arbitrary stops.

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>

---

Compatibility notes: As pointed out in the comments, datalist is not supported by some browsers. Depending on how those browsers handle unsupported / unrecognized elements, this may result in the browsers displaying the option values as plain text below your range input. If targeting the widest possible range of browsers is important to you, this may be a problem.

One solution is to use the awkward repeating-linear-gradient kludge for webkit browsers in addition to gecko browsers, and then remove the datalist entirely.

Another solution would be to use CSS to explicitly set the datalist to display: none. This solution is probably the most preferable, as you aren't compromising features to provide legacy support.

这篇关于type =“range”的诀窍HTML输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！