::-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 (en-US) debe tener el valor none.

Ejemplo

Contenido CSS

css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}

Contenido HTML

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