Comment personnaliser la boîte de sélection de couleurs Webkit Input[type=color] ?

Personnalisation de l'entrée Webkit[type=color] Boîte de sélection de couleurs

Avec l'introduction d'un sélecteur de couleurs dans Chrome, les utilisateurs ont rencontré un gris problème de boîte lors de la définition de la couleur et de la couleur d’arrière-plan de l’entrée sur la même valeur. Pour résoudre ce problème, Webkit fournit des sélecteurs CSS spécifiques pour personnaliser les contrôles de formulaire.

Remarque : Ces sélecteurs ne sont pas officiels et pourraient tomber en panne dans les futures mises à jour de Webkit. Utilisez-les avec prudence pour des projets personnels uniquement.

Méthode 1 : Masquer la partie non colorée

Cette méthode utilise des sélecteurs spécifiques au kit Web pour masquer la partie non colorée du input :

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;
}

Cela garantit que la couleur d'arrière-plan d'entrée couvre entièrement le sélecteur de couleurs boîte.

Exemple HTML :

<input type=color value="#ff0000">

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!