如何使 HTML5 範圍滑桿在所有瀏覽器中垂直顯示？
- Barbara Streisand原創
- 2024-10-27 09:48:03755瀏覽
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