简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

HTML5 で垂直範囲スライダーを作成する方法: クロスブラウザー ガイド

DDD
リリース： 2024-10-27 01:10:30
オリジナル
713 人が閲覧しました

How to Create Vertical Range Sliders in HTML5: A Cross-Browser Guide

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 サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：ここでは、`:after` と `:hover` を組み合わせる問題に焦点を当てた、いくつかのタイトル オプションを示します。 オプション 1 (直接的かつ簡潔): * CSS で :after と :hover を使用してホバリング矢印を作成するには? オプション 2 次の記事：iPhone の Safari でフォント サイズが予想より大きいのはなぜですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1689
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1850
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1567
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1473
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1525
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！