102

<input type="range" />スライダー コントロールを縦に表示したいと思います。私が関心を持っているのは、範囲スライダー コントロールをサポートするブラウザーだけです。

高さを幅よりも大きく設定すると、ブラウザーの向きが自動的に変更されることを示すコメントや参考文献をいくつか見つけましたが、私のテストでは、Opera で動作していた Opera でのみ動作し、もう動作しません。HTML5 レンジ スライダーを垂直方向に向けるにはどうすればよいですか?

4

6 に答える 6

163

まず、高さを幅よりも大きく設定します。理論的には、これで十分です。HTML5 Spec は、次のことを示唆しています。

... UA は、スタイルシートで指定された高さと幅のプロパティの比率からコントロールの向きを決定しました。

Opera はこのように実装されていましたが、Opera は現在WebKit Blinkを使用しています。現在のところ、高さが幅よりも大きいことに基づいて垂直スライダーを実装するブラウザーはありません。そして現在、その提案は WHATWG によって審査中です。

いずれにせよ、ブラウザー間で適切なレイアウトを得るには、高さを幅よりも大きく設定する必要があります。左右のパディングを適用すると、レイアウトと配置にも役立ちます。

Chrome の場合は、-webkit-appearance: slider-vertical.

IE の場合は、 を使用しますwriting-mode: bt-lr。

Firefox の場合orient="vertical"、html に属性を追加します。彼らがこのようにしたことは残念です。ビジュアル スタイルは、HTML ではなく CSS で制御する必要があります。

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* Chromium */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}
<input type="range" orient="vertical" />

免責事項:

このソリューションは、まだ未定義または未確定の CSS プロパティの現在のブラウザー実装に基づいてい ます。コードで使用する場合は、新しいブラウザー バージョンがリリースされ、WHATWG の推奨事項が完了したときにコードを調整する準備をしてください。スライドの向きを公式に制御する CSS 属性が最終的に決定されたら、この github issueを購読して最新情報を入手してください。

MDN には-webkit-appearance、ウェブでの使用に関する警告が含まれています。

注:このプロパティを Web サイトで使用する場合は、慎重にテストする必要があります。最新のほとんどのブラウザーでサポートされていますが、その実装はさまざまです。古いブラウザーでは、キーワードでさえ、none異なるブラウザー間ですべてのフォーム要素に同じ効果をもたらすわけではなく、まったくサポートしていないものもあります。最新のブラウザーでは、違いは小さくなります。

これらの警告にもかかわらず、この回答は現在ほぼ 9 年前のものであり、アドバイスはほとんど変わっていません。

于 2013-04-10T20:32:22.640 に答える
85

コンテナーの高さ/幅に注意してください。また、下に配置する必要がある場合もあります。

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}
<input type="range"/>

または同等の 3d 変換:

input[type="range"] {
   transform: rotateZ(270deg);
}

これを使用して、水平または垂直にそれぞれ180度または90度に設定することにより、スライドの方向を切り替えることもできます。

于 2014-11-24T15:49:54.360 に答える
29

位置を絶対に変更せずに、以下を参照してください。これは、最近のすべてのブラウザもサポートしています。

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}
<input type="range" class="vranger"/>

非常に古いブラウザの場合、 CSS サンドペーパー-sand-transform: rotate(10deg);から使用できます

または使用

-ms-transform: rotate(270deg);IE9などのプレフィックスセレクター

于 2015-04-27T06:33:01.553 に答える