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適用前

■Chrome(Win8.1)　CSS適用後

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

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

■Firefox

■IE11