非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
::-moz-range-track
CSS 疑似要素は、 type="range"
の <input>
でインジケーターがスライドする track (例, 溝) を表す Mozilla 拡張機能 です。
Note: ::-moz-range-track
を <input type="range">
以外で使用すると、何にも一致せず、効果がありません。
構文
::-moz-range-track
例
HTML
<input type="range" min="0" max="100" step="5" value="50"/>
CSS
input[type=range]::-moz-range-track {
background-color: green;
}
結果
このスタイルを使用するプログレスバーは、次のようになります:
仕様
標準の一部ではありません。
ブラウザー実装状況
BCD tables only load in the browser
関連項目
- The pseudo-elements used by Gecko to style other parts of a range input:
::-moz-range-thumb
represents the indicator that slides in the groove.::-moz-range-progress
represents the lower portion of the track.
- Similar pseudo-elements used by other browsers:
::-webkit-slider-runnable-track
, pseudo-element supported by WebKit and Blink (Safari, Chrome, and Opera)::-ms-track
, pseudo-element supported by Internet Explorer and Edge
- CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
- QuirksMode: Styling and scripting sliders