ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML5 レンジ スライダーをすべてのブラウザーで垂直に表示するにはどうすればよいですか?
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 中国語 Web サイトの他の関連記事を参照してください。