ホームページ > 記事 > ウェブフロントエンド > HTML5 で垂直範囲スライダーを作成する方法: クロスブラウザー ガイド
HTML5 で垂直範囲スライダーを作成する方法: クロスブラウザー ガイド
- DDDオリジナル
- 2024-10-27 01:10:30700ブラウズ
HTML5 範囲スライダーの垂直方向
フォーム入力スライダーを作成する場合、特定の UI デザインでは方向のカスタマイズが不可欠な場合があります。 コントロールにはデフォルトで水平スライダーが用意されています。この記事では、この機能をサポートするブラウザーでコントロールを垂直方向に表示する手法について説明します。
最新のブラウザ (Chrome、Firefox)
最新バージョンの場合Chrome と Firefox の場合、次の CSS スタイルを適用して垂直方向を実現できます:
<code class="css">input[type=range] {
writing-mode: vertical-lr;
direction: rtl;
}</code>
古い Chrome ブラウザ
古いバージョンの Chrome およびその他の Chromium の場合-ベースのブラウザでは、外観プロパティを使用します。
<code class="css">input[type=range] {
appearance: slider-vertical;
width: 16px;
}</code>
レガシー Firefox ブラウザ
初期の Firefox バージョンでは、orient 属性を に追加します。要素は垂直方向を強制できます:
<code class="html"><html orient="vertical">
...
<input type="range" />
...
</html></code>
コード例
ブラウザ間の互換性のためのすべてのテクニックを組み合わせた完全な例を次に示します:
<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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。