::-webkit-progress-bar
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
El pseudo-element CSS ::-webkit-progress-bar
representa la barra sencere d'un element <progress>
. Normalment només és visible la part no emplenada de la barra, ja que de forma predeterminada es processa a continuació el pseudo-element ::-webkit-progress-value
. És un fill del pseudo-element ::-webkit-progress-inner-element
(en-US) i el pare del pseudo-element ::-webkit-progress-value
.
Nota: Perquè ::-webkit-progress-value
tingui efecte, -webkit-appearance
(en-US) s'ha d'establir a none
en l'element <progress>
.
Especificacions
No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.
Exemple
Contingut CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
Contingut HTML
<progress value="10" max="50">
Resultat
Una barra de progrés que utilitzi aquest estil pot semblar una cosa així :
Navegadors compatibles
Descripció | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suport bàsic | No support | (Yes) | No support | (Yes) | (Yes) |
Descripció | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suport bàsic | No support | (Yes) | No support | (Yes) | (Yes) |
Vegeu també
- Pseudo-elements utilitzats per WebKit/Blink per donar estil a altres parts d'un element
<progress>
: ::-moz-progress-bar
::-ms-fill