HTML et CSS: Les éléments flottants. Position flottante :float...
La propriété CSS accent-color permet à la page de spécifier une couleur utilisée par les contrôles de formulaire au lieu d'utiliser la couleur par défaut intégrée.
Par exemple, 'accent-color : red' sur un changerait la couleur bleue en rouge autour de la coche.
La nouvelle propriété CSS accent-color permet de mettre en œuvre rapidement et facilement les couleurs de notre choix pour certaines entrées de formulaire en exploitant les styles de l'agent utilisateur. Dans cet article, nous allons voir ce qu'elle fait et comment l'utiliser pour des cases à cocher et des boutons radio
accent-color: auto|color|initial|inherit;
Valeur par défaut : | auto |
Héritée : | oui |
Animable : | non. Lire à propos des propriétés css animables(animatable) |
Version : | CSS4 |
Syntaxe JavaScript : | object.style.accentColor="red" |
Valeur | Description |
---|---|
auto | Valeur par défaut. Le navigateur choisit la couleur d'accent |
color | Spécifie la couleur à utiliser comme couleur d'accent. Toutes les valeurs de couleur légales peuvent être utilisées (rgb, hex, named-color, etc.). Pour plus d'informations sur les valeurs légales, lisez notre tutoriel sur les couleurs CSS. |
initial | Définit cette propriété à sa valeur par défaut. Lire à propos de la valeur initiale |
inherit | Hérite de cette propriété de son élément parent. Lire à propos de inherit |
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 93.0 | 93.0 | 92.0 | 15.4 | 79.0 |
<!DOCTYPE html> <html> <head> <style> input[type=checkbox] { accent-color: red; } input[type=radio] { accent-color: green; } input[type=range] { accent-color: rgb(0, 0, 255); } progress { accent-color: hsl(39, 100%, 50%); } </style> </head> <body> <h1>La propriété accent-color </h1> <h3>Accent color pour checkboxes:</h3> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" checked> <label for="vehicle1"> J'ai une voiture</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" checked> <label for="vehicle2"> Je n'ai pas de voiture</label><br><br> <h3>Accent color pour radiobuttons:</h3> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS" checked> <label for="css">CSS</label><br> <h3>Accent color pour range :</h3> <label for="vol">Volume:</label> <input type="range" id="vol" name="vol" min="0" max="50"> <h3>Accent color pour a progress element:</h3> <label for="file">Progression du téléchargement:</label> <progress id="file" value="72" max="100"> 72% </progress> </body> </html>