Wie kann ich das Farbauswahlfeld „Input[type=color]' des Webkits anpassen?

Anpassen der Webkit-Eingabe[type=color]-Farbauswahlbox

Mit der Einführung einer Farbauswahl in Chrome sind Benutzer auf ein Grau gestoßen Box-Problem, wenn sowohl die Farbe als auch die Hintergrundfarbe der Eingabe auf denselben Wert eingestellt werden. Um dieses Problem zu beheben, stellt Webkit spezielle CSS-Selektoren zum Anpassen von Formularsteuerelementen bereit.

Hinweis: Diese Selektoren sind nicht offiziell und können in zukünftigen Webkit-Updates nicht mehr funktionieren. Verwenden Sie sie nur für persönliche Projekte mit Vorsicht.

Methode 1: Nicht farbigen Teil ausblenden

Diese Methode verwendet Webkit-spezifische Selektoren, um den nicht farbigen Teil des zu verbergen Eingabe:

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

Dadurch wird sichergestellt, dass die eingegebene Hintergrundfarbe den Farbwähler vollständig abdeckt Feld.

Beispiel-HTML:

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

Das obige ist der detaillierte Inhalt vonWie kann ich das Farbauswahlfeld „Input[type=color]' des Webkits anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!