Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
::-webkit-progress-inner-element
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
Le pseudo-élément CSS ::-webkit-progress-inner-element est une extension de WebKit qui représente le cadre extérieur de l'élément <progress>. C'est un pseudo-élément parent du pseudo-élément ::-webkit-progress-bar.
Note :
Afin que ::-webkit-progress-value ait un effet, il faut que appearance vaille none sur l'élément <progress>.
Syntaxe
::-webkit-progress-inner-element {
/* ... */
}
Exemples
Ces exemples ne fonctionnent que sur Blink et WebKit.
Ajouter une bordure noire autour de la barre de progression
Dans cet exemple, une bordure noire de 2px est ajoutée autour de la barre de progression.
HTML
<progress value="10" max="50"></progress>
CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-inner-element {
border: 2px solid black;
}
Résultat
Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :
La barre de progression est une longue boîte verte et grise avec une bordure noire. Les 20 % gauches de la boîte sont verts. Les 80 % droits sont gris.
Spécifications
Ce pseudo-élément ne fait partie d'aucun standard.
Compatibilité des navigateurs
Chargement...
Voir aussi
-
Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments
<progress>: ::-moz-progress-bar