4
CSSを使用してスタイリングinput[type=range]です。thumbとtrackで行います。
3つのブラウザ（-ms、-moz、-webkit）のすべてが適切なプレフィックスを持っています。WebkitのCSSの入力範囲のスタイリングは低いですか？
しかし、ベンダープレフィックスがChromeのようなWebkitブラウザのprogressのスタイルに合っているかどうかはわかりません。 Internet ExplorerおよびMicrosoft Edgeでは、-ms-fill-lowerが有効です。
Firefoxでは、-moz-range-progressを使用して問題を解決しました。 // Firefox、およびInternet Explorerのが、Chromeで異なって見えます：私はマイクロソフトエッジで期待どおり
input[type=range] {
\t /*removes default webkit styles*/
\t -webkit-appearance: none;
\t
\t /*fix for FF unable to apply focus style bug */
\t border: 1px solid white;
\t
\t /*required for proper track sizing in FF*/
\t width: 350px;
}
/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track {
\t width: 300px;
\t height: 5px;
\t background: #ccc;
\t border: none;
\t border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
\t -webkit-appearance: none;
\t border: none;
\t height: 16px;
\t width: 16px;
\t border-radius: 50%;
\t background: #004d66;
\t margin-top: -7px;
}
input[type=range]:focus {
\t outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
\t background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
\t /* width: 150px;
\t height: 5px; */
\t background: #ccc;
\t border: none;
\t border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
\t border: none;
\t height: 16px;
\t width: 16px;
\t border-radius: 50%;
\t background: #004d66;
}
input[type=range]::-moz-range-progress {
\t background: #33ccff;
\t border-radius: 10px;
\t height: 5px;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
\t outline: 1px solid white;
\t outline-offset: -1px;
}
/* Microsoft */
input[type=range]::-ms-track {
\t
\t height: 2px;
\t /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
\t background: transparent;
\t
\t /*leave room for the larger thumb to overflow with a transparent border */
\t border-color: transparent;
\t border-width: 6px 0;
\t /*remove default tick marks*/
\t color: transparent;
}
input[type=range]::-ms-thumb {
\t border: none;
\t height: 16px;
\t width: 16px;
\t border-radius: 50%;
\t background: #004d66;
\t margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
\t background: #33ccff;
\t border-radius: 10px;
\t height: 5px;
}
input[type=range]::-ms-fill-upper {
\t background: #ccc;
\t border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
\t background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
\t background: #ddd;
}<input type="range" />IはすでにStyling input range for webkit with pure CSSを読み、鉱山に試み、
が、複数の入力[タイプ=範囲] sが一つの文書にあるときには、奇妙な動作。
スタイリングトラックのベンダープレフィックスには、親指がすでに渡されているか、CSSのみが使用されていますか？
あなたは[mcve]を、ここでは質問のスニペットとして提供できますか？ –
@MrListerスタイルシートを追加しました。 [this]（http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html）コードは私の基盤です。 –