Heim >Web-Frontend >CSS-Tutorial >Wie kann ich das Farbauswahl-Eingabefeld in Webkit anpassen?

Wie kann ich das Farbauswahl-Eingabefeld in Webkit anpassen?

Susan Sarandon
Susan SarandonOriginal
2024-11-20 03:34:02418Durchsuche

How to Customize the Color Picker Input Box in Webkit?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn