Propriété css accent-color

Fonctionnalité : Simplifier les styles de formulaires avec accent-color

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

Définition et utilisation de la propriété css accent-color

La propriété accent-color spécifie la couleur d'accent pour les contrôles de l'interface utilisateur tels que : <input type="checkbox">, <input type="radio">, <input type="range"> et <progress>.

CSS Syntaxe :

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"

Valeurs de la propriété css accent-color

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

Support des navigateurs

Les chiffres du tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Explorateur
Verssion	93.0	93.0	92.0	15.4	79.0

Exemple :

Copier le code

<!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>

Liste des propriétés css

Fonctionnalité : Simplifier les styles de formulaires avec accent-color

Les propriétés CSS par ordre alphabétique

Définition et utilisation de la propriété css accent-color

Valeurs de la propriété css accent-color

Support des navigateurs

La méthode secrète likes sans fin sur Facebook