oujood.com

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

chercher |

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 Google Chrome Internet Explorer Firefox Safari Opera
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>


Voir aussi nos tutoriel :

HTML et CSS les flottants

HTML et CSS: Les éléments flottants. Position flottante :float...

word-spacing

Augmente ou diminue l'espace entre les mots dans un texte

localeconv, localeconv

Lit la configuration locale