Wie kann ich das Farbauswahl-Eingabefeld in Webkit anpassen?

Steuerung der Farbauswahlbox im Webkit

Kreuzkompatibilitäts-Polyfills für ältere Browser können zu Inkonsistenzen beim Stylen von Eingabeelementen[type=color] führen im Webkit. Insbesondere wenn die Farbe und die Hintergrundfarbe der Eingabe übereinstimmend eingestellt werden, wird ein graues Kästchen um die ausgewählte Farbe angezeigt.

WebKit-spezifische CSS-Selektoren

Zum Anpassen des Formulars Neben Steuerelementen wie dem Farbwähler bietet Webkit spezielle CSS-Selektoren. Es ist jedoch wichtig zu beachten, dass diese Selektoren nicht offiziell sind und möglicherweise wichtigen Änderungen in zukünftigen Webkit-Updates unterliegen.

Daher wird empfohlen, sie nicht in der Produktion zu verwenden, es sei denn, es handelt sich um persönliche Projekte.

Methode 1: Ausblenden des nicht farbigen Teils

Mithilfe von Webkit-spezifischen Selektoren ist es möglich, den nicht farbigen Teil der Farbauswahleingabe weitgehend auszublenden.

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

Das obige ist der detaillierte Inhalt vonWie kann ich das Farbauswahl-Eingabefeld in Webkit anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!