昵称为type =“range”HTML输入

概述阅读 this后,我想知道是否可以在Chrome和Firefox中显示类型=“范围”数字输入的刻度？我能找到的最接近的事情是 this. 输入范围在造型方面仍然是一场噩梦.也就是说,在主要浏览器上显示标记是可能的,有一点弯头润滑脂和浏览器特定的解决方案. IE浏览器 您似乎知道,如果添加HTML步骤属性,Internet Explorer将默认显示tick.在一个奇怪的事件,Internet Ex 阅读 this后,我想知道是否可以在Chrome和firefox中显示类型=“范围”数字输入的刻度？我能找到的最接近的事情是 this.解决方法 输入范围在造型方面仍然是一场噩梦.也就是说,在主要浏览器上显示标记是可能的,有一点弯头润滑脂和浏览器特定的解决方案.

IE浏览器

您似乎知道,如果添加HTML步骤属性,Internet Explorer将默认显示tick.在一个奇怪的事件,Internet Explorer可以说是最灵活的浏览器,当涉及到造型输入范围.

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

兼容性注释：如评论中所指出的,dataList is not supported by some browsers.根据这些浏览器如何处理不受支持/无法识别的元素,这可能导致浏览器将选项值显示为范围输入下的纯文本.如果定位到尽可能广泛的浏览器对您来说很重要,这可能是一个问题.

一个解决方案是使用尴尬的重复线性渐变kludge除了壁虎浏览器之外的webkit浏览器,然后完全删除dataList.

另一个解决方案是使用CSS来显式地设置数据列表：none.这个解决方案可能是最好的,因为你不会损害提供传统支持的功能.

总结

以上是内存溢出为你收集整理的昵称为type =“range”HTML输入全部内容，希望文章能够帮你解决昵称为type =“range”HTML输入所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。