如何使 HTML5 范围滑块在所有浏览器中垂直显示？
- Barbara Streisand原创
- 2024-10-27 09:48:03610浏览
HTML5 范围滑块的垂直方向
由于浏览器之间的不一致，在 HTML5 中垂直显示范围滑块已被证明具有挑战性。为此，需要根据浏览器的支持情况采取各种方法。
现代浏览器（Chrome 和 Firefox >=2024）
适用于当代版本的 Chrome 和 Firefox ，以下解决方案被证明是有效的：
<code class="css">input[type=range] {
writing-mode: vertical-lr;
direction: rtl;
width: 16px;
}</code>
此方法将滑块垂直对齐，方向：rtl，确保向上滑动增加值，向下滑动减少值。
旧版 Chrome（以及其他基于 Chromium 的浏览器）
对于旧版本的 Chrome 和基于 Chromium 的浏览器，可以执行以下操作：
<code class="css">input[type=range] {
appearance: slider-vertical;
width: 16px; /* Optional, suggested to match newer browsers */
}</code>
此解决方案强制滑块垂直显示，尽管它可能不会继承所需的样式（例如，轨道和拇指外观）。
旧版 Firefox
对于旧版本的 Firefox，其中的 orient 属性html 元素是必需的：
<code class="html"><html orient="vertical">
<body>
<input type="range" />
</body>
</html></code>
此外，还需要以下 CSS：
<code class="css">input[type=range] {
vertical-align: bottom;
}</code>
此方法垂直对齐滑块，但在处理样式和用户交互方面可能有限制.
兼容示例
以下代码片段提供了一个应该在所有主要浏览器上运行的示例（截至 2024 年 4 月）：
<code class="html"><input type="range" orient="vertical" /></code>
<code class="css">input[type=range][orient=vertical] {
writing-mode: vertical-lr;
direction: rtl;
appearance: slider-vertical;
width: 16px;
vertical-align: bottom;
}</code>
这个全面的解决方案可确保范围滑块在不同浏览器版本中以一致的方式垂直显示。
以上是如何使 HTML5 范围滑块在所有浏览器中垂直显示？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn