Comment contrôler la zone de couleur dans Input[Type=Color] avec Webkit CSS ?

Contrôle de la zone de couleur dans Input[Type=Color] avec Webkit CSS

Dans le domaine du développement Web, les contrôles de formulaire personnalisables sont essentiels pour obtenir une interface cohérente et conviviale. Cependant, l'apparence par défaut de certains éléments d'entrée, comme input[type=color], peut parfois s'avérer problématique.

Par exemple, lorsque la couleur et la couleur d'arrière-plan d'un input[type=color] sont définies sur la même valeur, un cadre gris apparaît autour de la couleur, nuisant à l'esthétique recherchée. Pour résoudre ce problème, Webkit fournit un ensemble de sélecteurs CSS non officiels qui vous permettent de modifier l'apparence des contrôles de formulaire.

Méthode 1 : masquer la zone non colorée

À l'aide de sélecteurs spécifiques à Webkit, nous pouvons masquer la partie grise de l'entrée, ne laissant que l'échantillon de couleur visible.

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

Cette méthode supprime efficacement la zone grise, présentant un sélecteur de couleurs propre et cohérent.

Attention :

Il est important de notez que les sélecteurs non officiels de Webkit sont sujets à des changements dans les futures mises à jour. Par conséquent, leur utilisation pour les environnements de production est fortement déconseillée. Ils conviennent mieux aux projets expérimentaux ou à un usage personnel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!