CSS/input range属性のデザインをスタイルシートで指定する

近年のブラウザでは順次実装されつつあるinputタグのrange属性。基本はOS標準もしくはブラウザ独自のUIが表示されますが、これをCSSで指定することができるようです。

Chrome、Safariなどで適用されます。
残念ながら、FirefoxやIEでNGです。Android標準ブラウザも、4.0以降なら対応しているようです。

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

まずappearanceプロパティをnoneに指定して、標準の見た目が適用されないようにします。
ここから色々とプロパティを指定していくのですが、rangeはスライダーのツマミ部分をデザインしたいところです。それを指定するための擬似クラスがあるようです。

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* ここにプロパティ */

}

ここに色々とプロパティを書いていくと、ツマミ部分のデザインを変更できるようです。
ただし、擬似クラスの名前の通り、webkit系でしか今のところ対応できないみたいです。

■Chrome(Win8.1) CSS適用前
range_chrome

■Chrome(Win8.1) CSS適用後
range_chrome_css

こんな感じで、ちょっと凝った感じにすることができます。
スライダーの入力については、jQueryプラグイン等で色々とあるかと思いますが、HTML5標準のrangeでもある程度はカスタマイズできるのはいいことだと思います。ただ、現状ではやはりデザインを統一するなら独自プラグイン等を利用するほうがいいですね。
と言うか、現時点だとrangeの値の挙動も各ブラウザで実装が違う気がします。

繰り返しになりますが、同じようにCSS適用しても、FirefoxとIE11では無効でした。

■Firefox
range_ff_css

■IE11
range_ie11

スポンサーリンク
スポンサーリンク
iconDecotter-blog-contents-2




iconDecotter-blog-contents-2




シェアする

フォローする

スポンサーリンク
iconDecotter-blog-contents-2