Wie kann ich das Farbeingabefeld in Webkit-Browsern anpassen?

Styling des Farbeingabefelds im Webkit

Eingabeelemente vom Typ „Farbe“ bieten eine Farbauswahl in modernen Browsern. Allerdings kann das Aussehen des Kästchens um die ausgewählte Farbe je nach Browser variieren. In Webkit-basierten Browsern wie Chrome und Safari wird möglicherweise ein graues Kästchen um die Farbvorschau angezeigt.

Anpassen des Kästchens

Um das Erscheinungsbild dieses Kästchens anzupassen, Webkit stellt spezifische CSS-Selektoren bereit, die eine Anpassung ermöglichen. Es ist jedoch wichtig zu beachten, dass diese Selektoren nicht offiziell sind und in zukünftigen Webkit-Updates geändert werden können.

Methode 1: Ausblenden des nicht farbigen Bereichs

Dies Die Methode verwendet den Selektor -webkit-appearance: none, um das Standard-Erscheinungsbild der Eingabe zu entfernen, und wendet dann benutzerdefinierte Stile an, um den nicht farbigen Teil des Felds 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;
}

Diese Methode verbirgt effektiv das graue Feld , sodass nur der farbige Teil sichtbar bleibt. Es ist jedoch wichtig zu bedenken, dass die Verwendung von Webkit-spezifischen Selektoren zu Kompatibilitätsproblemen in anderen Browsern führen kann.

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