HTML5 レンジスライダーをすべてのブラウザーで垂直に表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-10-27 09:48:03

オリジナル

712 人が閲覧しました

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

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

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