::-webkit-progress-value
非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
::-webkit-progress-value
CSS 疑似要素 は、 <progress>
要素のバーの塗りつぶされた部分を表します。これは、 ::-webkit-progress-bar
疑似要素の子要素です。
Note: ::-webkit-progress-value
を有効にするには -webkit-appearance
を <progress>
要素で none
に設定する必要があります。
仕様
仕様の一部ではありません。これは、 WebKit/Blink に固有の独自疑似要素です。
例
HTML
<progress value="10" max="50">
CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-value {
background-color: orange;
}
Result
上記のスタイルを使用したプログレスバーは次のようになります:
ブラウザーの実装状況
BCD tables only load in the browser
関連項目
- WebKit/Blink が
<progress>
要素のその他の部分をスタイルするために使用する疑似要素: ::-moz-progress-bar
::-ms-fill