::-moz-range-progress 擬似要素 (CSS)
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
::-moz-range-progress は CSS の擬似要素で、Mozilla 拡張であり、<input> の type="range" 内でインジケーターがスライドするトラック（すなわち溝）の下部を表します。この部分は、つまみ（すなわち仮想ノブ）によって現在選択されている値よりも小さい値に対応しています。
メモ:
::-moz-range-progress を <input type="range"> 以外の要素で使用しても、一致する要素がなく、何の効果もありません。
構文
css
::-moz-range-progress {
/* ... */
}
例
HTML
html
<input type="range" min="0" max="100" step="5" value="50" />
CSS
css
input[type="range"]::-moz-range-progress {
background-color: green;
height: 1em;
}
結果
このスタイルを使用した進捗バーは、次のような感じになるでしょう。
仕様書
どの仕様書にもありません。
ブラウザーの互換性
関連情報
-
Gecko が範囲入力の他の部分にスタイルを適用するために使用する擬似要素
::-moz-range-thumbは、溝の中をスライドするインジケーターを表します。::-moz-range-trackは、つまみがスライドする溝を表します。
-
CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS