No estándar
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.
Resumen
El pseudo-elemento CSS ::-webkit-progress-value representa la parte rellena de la barra del elemento <progress>. Es hija del pseudo-elemento ::-webkit-progress-bar.
Nota: para que ::-webkit-progress-value tenga efecto en el elemento <progress> -webkit-appearance deberá tener none como valor.
Especificaciones
No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.
Ejemplo
Contenido CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-value {
background-color: orange;
}
Contenido HTML
<progress value="10" max="50">
Resultado
Una barra de progreso con el estilo indicado anteriormente será similar a esta:
Compatibilidad con los distintos navegadores
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Característica | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Soporte básico | Sin soporte | (Yes) | Sin soporte | (Yes) | (Yes) |
| Característica | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Soporte básico | Sin soporte | (Yes) | Sin soporte | (Yes) | (Yes) |
Ver además
- Los pseudo-elemento de WebKit/Blink para dar estilos a otras partes de un elemento
<progress>: ::-moz-progress-bar::-ms-fill