Wie kann ich das Farbauswahlfeld in WebKit-Browsern anpassen?

Anpassung der Farbauswahl in Webkit

Im Kontext von Eingabeelementen des Farbtyps bieten Webkit-Browser eine Farbauswahlfunktion, die das umgibt ausgewählte Farbe mit sichtbarem Kästchen. Dieses Feld kann als 1 Pixel großer grauer Rand angezeigt werden, wenn die Farbe der Eingabe und die Hintergrundfarbe übereinstimmen.

Um das Erscheinungsbild dieses Feldes zu steuern, gibt es mit CSS begrenzte Optionen.

WebKit- Spezifische Selektoren

WebKit bietet einige inoffizielle CSS-Selektoren, die speziell für die Anpassung von Formularsteuerelementen entwickelt wurden. Diese Selektoren können jedoch in zukünftigen WebKit-Updates möglicherweise beschädigt werden. Daher sollte ihre Verwendung auf persönliche Projekte und nicht auf Produktionsumgebungen beschränkt werden.

Methode 1: Die Box verstecken

Diese Methode verwendet Webkit-spezifische Selektoren, um die meisten davon zu verbergen den nicht farbigen Teil des Eingabeelements, wodurch die Sichtbarkeit des Felds um die Farbe effektiv minimiert wird:

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

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