Comment puis-je personnaliser la zone de saisie des couleurs dans les navigateurs Webkit ?

Style de la zone de saisie de couleur dans Webkit

Les éléments de saisie de type « couleur » fournissent un sélecteur de couleur dans les navigateurs modernes. Cependant, l'apparence du cadre autour de la couleur sélectionnée peut varier selon le navigateur. Dans les navigateurs basés sur Webkit comme Chrome et Safari, un cadre gris peut apparaître autour de l'aperçu des couleurs.

Personnalisation de la boîte

Pour ajuster l'apparence de cette boîte, Webkit fournit des sélecteurs CSS spécifiques qui permettent la personnalisation. Cependant, il est important de noter que ces sélecteurs ne sont pas officiels et sont susceptibles d'être modifiés dans les futures mises à jour du Webkit.

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

Ceci La méthode utilise le sélecteur -webkit-apparence: none pour supprimer l'apparence par défaut de l'entrée, puis applique des styles personnalisés pour masquer la partie non colorée de l'entrée. box :

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 masque efficacement la boîte grise, ne laissant visible que la partie colorée. Cependant, il est important de se rappeler que le fait de s'appuyer sur des sélecteurs spécifiques à Webkit peut créer des problèmes de compatibilité dans d'autres navigateurs.

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!