Firefox
このブラウザでは、::-moz-range-track
と::-moz-range-thumb
の疑似要素を用います。
/* バーのカスタマイズ */
input[type="range"]::-moz-range-track {
/* 背景色を指定 */
background-color: #D3D8B0;
/* 高さを指定 */
height: 4px;
/* 幅を指定 */
width: 100%;
}
/* つまみのカスタマイズ */
input[type="range"]::-moz-range-thumb {
/* 背景色を指定 */
background-color: #D3D8B0;
/* 枠を指定 */
border: 1px solid #3A362D;
/* 角の丸みを指定 */
border-radius: 30%;
/* 高さを指定 */
height: 20px;
/* 幅を指定 */
width: 10px;
}
スライドバーは以下のような表示になります。
IE・Edge
これらのブラウザでは、::-ms-track
と::-ms-thumb
を指定します。
/* input要素のtype="range"属性を指定 */
input[type="range"] {
/* 要素内の余白を除去 */
padding: 0;
/* カーソルの表示をポインターに変更 */
cursor: pointer;
}
/* バーのカスタマイズ */
input[type="range"]::-ms-track {
/* 背景色を指定 */
background-color: #D3D8B0;
/* 枠を非表示 */
border: none;
/* 色を透過*/
color: transparent;
/* 高さを指定 */
height: 4px;
/* 幅を指定 */
width: 100%;
}
/* つまみのカスタマイズ */
input[type="range"]::-ms-thumb {
/* 背景色を指定 */
background-color: #D3D8B0;
/* 枠を指定 */
border: 1px solid #3A362D;
}
デフォルトの装飾を取り除くために、バーのカスタマイズでborder
を非表示に、color
を透過させてます。IEに関して、padding
が付いているのでこれも取り除きますが、それでもまだ他の要素と併記するとズレが生じています。
原因が不明なのでIEだけにCSSを適用して対処しています。
IEの判別
サイトではユーザーエージェントを利用して判定しています。以下はJavascriptのコードです。
//IEの判別
function checkIE() {
//ユーザーエージェントの文字列を取得
var str = window.navigator.userAgent.toLowerCase();
//IEを示す文字列が含まれているかを判定
if (str.search(/msie|trident/) !== -1){
//html要素にクラスを付与
$('html').addClass('ie');
//playerオブジェクトに判定を保持
player.ie = true;
//IE9以下かどうかを判定
if (str.indexOf('msie') !== -1 &&
str.indexOf('msie 10') === -1) {
//プレーヤーの起動を無効
player.disable = true;
}
}
}
//ページの読み込み時に処理が可能になれば実行
$(function() {
checkIE();
//他の処理は省略
・・・
});
window.navigator.userAgent
でユーザーエージェントを取得し、toLowerCase()
で小文字に変換します。例えばIE11であれば以下のような文字列が得られます。
mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; rv:11.0) like gecko
IE10以下ではmsie
の文字列が含まれますが、IE11には含まれていないので、代わりにtrident
の文字列で判別します。Stringオブジェクトのメソッドであるsearch()
は、引数に正規表現を指定し、マッチした場合はその箇所のインデックスを返し、そうでない場合は-1
を返します。上記の例では、文字列msie
とtrident
のどちらかが含まれていれば、0
以上の数値を返します。また、indexOf()
も同様ですが、引数には正規表現でなく、マッチさせたい文字列を指定します。上記では、msie
が含まれていればIE10以下であり、そこからIE10を除外するのに、msie 10
の文字列で判定しています。
これによりhtml
要素に付与したクラスie
を用いて、CSSで以下のように調整を加えています。
/* IEのtype="range"属性を囲む要素の調整 */
.ie .player-block-seek {
/* レイアウトを保持し位置を変更 */
position: relative;
/* 上からの距離を指定 */
top: -2px;
}
上記によりIEのスライドバーは以下のように修正されます。
URL: ringil-music.com
ライブラリ: Bootstrap 3・JQuery 1.12.4