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!
