Comment personnaliser la zone de saisie du sélecteur de couleurs dans Webkit ?

Contrôle de la boîte de sélection de couleurs dans Webkit

Les polyfills de compatibilité croisée pour les navigateurs plus anciens peuvent introduire des incohérences lors du style des éléments input[type=color] dans Webkit. Plus précisément, lors de la définition de la couleur et de la couleur d'arrière-plan de l'entrée, une zone grise apparaît autour de la couleur sélectionnée.

Sélecteurs CSS spécifiques au WebKit

Pour personnaliser le formulaire des contrôles comme le sélecteur de couleurs, Webkit propose des sélecteurs CSS spécifiques. Cependant, il est important de noter que ces sélecteurs ne sont pas officiels et peuvent être sujets à des modifications importantes dans les futures mises à jour du Webkit.

Par conséquent, il est recommandé d'éviter de les utiliser en production, sauf s'il s'agit de projets personnels.

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

À l'aide des sélecteurs spécifiques au Webkit, il est possible de masquer en grande partie la partie non colorée de l'entrée du sélecteur de couleurs.

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

<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!