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

HTML5 レンジ スライダーをすべてのブラウザーで垂直に表示するにはどうすればよいですか?

Barbara Streisand
リリース： 2024-10-27 09:48:03
オリジナル
619 人が閲覧しました

How can I make an HTML5 range slider display vertically across all browsers?

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

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