Wie kann ich den Pfeilstil in einer ausgewählten Eingabe in verschiedenen Browsern anpassen?

Anpassen des Pfeilstils in ausgewählten Eingaben

Die vorliegende Aufgabe besteht darin, das Standardpfeilbild in einer ausgewählten Eingabe durch ein benutzerdefiniertes Bild zu ersetzen. Bemühungen, diese Anpassung zu implementieren, waren jedoch nur in Chrome erfolgreich.

Der bereitgestellte HTML- und CSS-Code umfasst die Erstellung eines div-Elements mit den gleichen Abmessungen wie die ausgewählte Eingabe und die Festlegung seines Hintergrunds auf transparent. Ein Bild des gewünschten Pfeils ist als Hintergrund in der rechten oberen Ecke des Div eingefügt.

Leider zeigen Firefox und IE9 den Originalpfeil anstelle des benutzerdefinierten Bildes an. Um dieses Problem zu beheben, sollten Sie die folgenden CSS-Änderungen in Betracht ziehen:

.styled-select select {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
}

Wenn dieser Code auf das Element „select“ angewendet wird, entfernt er den Standardstil des Browsers, einschließlich des Pfeils. Es ist jedoch zu beachten, dass Firefox diese Funktionalität erst ab Version 35 vollständig unterstützt.

Ein alternativer Ansatz ist die Verwendung von JavaScript. Eine Problemumgehung wurde in dieser jsfiddle demonstriert: https://jsfiddle.net/b5gu6306/

Zusammenfassend lässt sich sagen, dass Sie zum Anpassen des Pfeilstils in einer Auswahleingabe das Erscheinungsbild des Auswahlelements mithilfe des vorgeschlagenen CSS-Codes ändern müssen. Erwägen Sie für Firefox-Versionen vor 35 die Implementierung der bereitgestellten JavaScript-Problemumgehung.

Das obige ist der detaillierte Inhalt vonWie kann ich den Pfeilstil in einer ausgewählten Eingabe in verschiedenen Browsern anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!