12

<input type='range' />IE10 で要素のスタイルを設定したい。

デフォルトでは、IE 10 は要素を次のようにスタイルします。 ここに画像の説明を入力

たとえば、青を赤に、灰色を黒に、小さなバーを黄色に、小さな黒いスクラバーを白に変更します。background-colorプロパティとcolorプロパティをCSSで上書きしてみました。しかし、うまくいきませんでした。

何か案は？

4

3 に答える 3

14

Microsoft CSS 疑似要素を使用できます。

  • ::-ms-fill-lower
  • ::-ms-fill-upper
  • ::-ms-親指
  • ::-ms-ticks-before
  • ::-ms-ticks-after
  • ::-ms-ティック
  • ::-ms-ツールチップ

ここに完全なMicrosoft疑似リストがあります...

IE10

これは、IE10 範囲コントロールのスタイルが設定されたページです (IE10 で開きます)。

WebKit

WebKit シャドウ DOM

その他のブラウザ

複数のブラウザーの範囲コントロールをスタイルする方法

スライディング・ナイトメア

于 2013-05-21T22:00:20.483 に答える
13

IE10 で範囲コントロールのスタイルを設定するために使用できる疑似要素が多数あります。

input[type="range"]::-ms-fill-upper {
    background-color: green;
}

親指の後の部分に着色します。親指を使用する前にスタイルを設定するには:

 input[type="range"]::-ms-fill-lower {
    background-color: lime green;
}

たとえば、http://jsfiddle.net/K8WyC/4/を参照してください

親指のスタイルを設定するには ::-ms-thumb を使用できますが、目盛りは::-ms-ticks-before、::-ms-ticks-after、または::-ms-track(後者は両側をスタイルします) でスタイルを設定できます。コントロールのさまざまな疑似要素の詳細については、http://msdn.microsoft.com/en-us/library/ie/hh869604 (v=vs.85).aspx を参照してください。

あなたが求めているスタイルは、次のフィドルのように実現できます: http://jsfiddle.net/K8WyC/8/

于 2013-05-02T23:47:09.593 に答える