代码之家 › 专栏 › 技术社区 › CtrlAltF2 BoldX

HTML5范围输入的极端标签

range user-interface html

CtrlAltF2 BoldX · 技术社区 · 4 年前

我想标记序数数据(0-10)的范围输入的极值,以消除UI的模糊。 Mozilla documentation 建议我应该能够使用 datalist 在我这样的形式中:

<datalist id="ord">
  <option value="0" label="Identical"></option>
  <option value="10" label="Very different"></option>
</datalist>
...
<input type="range" list="ord" min="0" max="10" value="5" name="name"/>

然后,文件警告说:

目前,没有浏览器完全支持这些功能。例如,Firefox根本不支持哈希标记和标签,而Chrome支持哈希标记但不支持标签。Chrome 66版本(66.0.3359.181)支持标签,但标签必须使用CSS进行样式设置,因为默认情况下其display属性设置为none,隐藏标签。

我的测试证实了这一点——在Chromium(Brave)、QtWebEngine(Qutebrowser)和Firefox中,要么什么都没有显示,要么没有标签就显示了tickmarks。是否有一种标准和最小的方法可以向范围滑块添加标签?

0 回复 | 直到 4 年前

geoffdavis 4 年前

您可以添加单独的元素,可能 <label> 元素,在输入的两侧,然后使用CSS对它们进行适当的定位。

就勾号而言,没有标准的方法来添加这些标记。然而,随着 progressive enhancement 记住,请随时添加 <datalist> 没有 label 属性(因为您将使用上述引用的元素设置这些属性),以便在浏览器上访问您网站的用户做支持勾号标记可以看看他们。

推荐文章

Seg · _tkinter。TclError|TCL安装不正确。FreeSimpleGUI中出错

8 月前

FranticFronk · Tkinter单选按钮在已选择时执行命令

9 月前

Kumkuatte · 如何将UI元素对齐到Unity中的左侧位置

1 年前

Calax · GUI不显示所有组件(C++)

1 年前

trassert · python flet容器

1 年前

Shady Abdulmunim · 喷气背包组合中的扫掠渐变圆形进度条

1 年前

Jason Parmar · 伪OSS错误:校验和输入流计算器不支持标记

1 年前

Kdwk · 为什么添加这个Flutter小部件会使应用程序对鼠标点击没有响应?

1 年前

zadisk8 · 带有Q拆分器和多级选项卡的PyQt5

1 年前

Patrick Visi · Zitadel日常创建服务用户

1 年前