Comment puis-je personnaliser la boîte de sélection de couleurs dans les navigateurs WebKit ?

Personnalisation du sélecteur de couleurs dans Webkit

Dans le contexte des éléments d'entrée du type de couleur, les navigateurs Webkit présentent une fonctionnalité de sélecteur de couleurs qui entoure le couleur sélectionnée avec une case visible. Cette boîte peut apparaître sous la forme d'une bordure grise de 1 px lorsque la couleur de l'entrée et la couleur d'arrière-plan correspondent.

Pour contrôler l'apparence de cette boîte, il existe des options limitées utilisant CSS.

WebKit- Sélecteurs spécifiques

WebKit propose des sélecteurs CSS non officiels spécialement conçus pour personnaliser les contrôles de formulaire. Cependant, ces sélecteurs sont sujets à des pannes potentielles dans les futures mises à jour de WebKit. Par conséquent, leur utilisation doit être limitée aux projets personnels plutôt qu'aux environnements de production.

Méthode 1 : Masquer la boîte

Cette méthode utilise des sélecteurs spécifiques au Webkit pour masquer la plupart des la partie non colorée de l'élément d'entrée, minimisant ainsi la visibilité de la boîte autour de la couleur :

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

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!