如何在 HTML5 中建立垂直範圍滑桿：跨瀏覽器指南
- DDD原創
- 2024-10-27 01:10:30785瀏覽
HTML5 範圍滑桿的垂直方向
建立表單輸入滑桿時，自訂其方向對於特定 UI 設計至關重要。而>控制項預設提供水平滑桿，本文探討在支援此功能的瀏覽器中垂直顯示它們的技術。
現代瀏覽器（Chrome、Firefox）
對於最新版本對於Chrome 和Firefox，可以套用下列CSS 樣式來實現垂直方向：
<code class="css">input[type=range] {
writing-mode: vertical-lr;
direction: rtl;
}</code> 舊版Chrome 瀏覽器
舊版Chrome 瀏覽器
<code class="css">input[type=range] {
appearance: slider-vertical;
width: 16px;
}</code>
舊版Chrome 和其他Chromium-基於瀏覽器，使用外觀屬性：
<code class="html"><html orient="vertical">
...
<input type="range" />
...
</html></code>在早期的Firefox 版本中，將orient 屬性加入 中。元素可以強制垂直方向：範例程式碼
<code class="css">input[type=range][orient=vertical] {
writing-mode: vertical-lr;
direction: rtl;
appearance: slider-vertical;
width: 16px;
vertical-align: bottom;
}
input[type=range]:not([orient=vertical]) {
appearance: slider-vertical;
width: 16px;
}</code>這是一個結合了跨瀏覽器相容性的所有技術的完整範例：<code class="html"><input type="range" orient="vertical" /></code>透過實作這些技術，您可以有效地顯示垂直範圍滑桿，以增強跨多個瀏覽器的表單UI 設計，並具有最佳相容性。
以上是如何在 HTML5 中建立垂直範圍滑桿：跨瀏覽器指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn