::-webkit-progress-bar
No estándar: Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.
Resumen
El pseudo-elemento CSS ::-webkit-progress-bar
representa la barra entera del elemento <progress>
. Normalmente sólo está visible a partir de la porción rellena de la barra ya que, por defecto se muestra debajo del pseudo-lemento ::-webkit-progress-value
. Es hijo del pseudo-elemento ::-webkit-progress-inner-element
y padre del pseudo-elemento ::-webkit-progress-value
.
Nota:
Para que ::-webkit-progress-value
tenga efecto , en el elemento <progress>
-webkit-appearance
debe tener el valor none.
Ejemplo
Contenido CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
Contenido HTML
<progress value="10" max="50"></progress>
Resultado
Una barra de progreso que use el estilo indicado anteriormente será similar a la siguiente:
Especificaciones
No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.
Compatibilidad con navegadores
BCD tables only load in the browser
Ver además
-
Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento
<progress>
: ::-moz-progress-bar
::-ms-fill