Wie kann ich ein Auswahlfeld mit ::after in WebKit formatieren?-CSS-Tutorial-php.cn

How Can I Style a Select Box with ::after in WebKit?

Stilvoll Elemente in WebKit stellen eine einzigartige Herausforderung dar. Entwickler versuchen häufig, ihr Erscheinungsbild mithilfe von CSS-Pseudoelementen wie ::after zu verbessern. In bestimmten Szenarien ist es jedoch unvermeidlich, auf Probleme zu stoßen. Lassen Sie uns eine konkrete Abfrage untersuchen, die dieses Rätsel verdeutlicht.

Die Abfrage: Gestalten eines zu stylen. Box mit zwei unterschiedlichen Teilen, ohne sich auf Bilder zu verlassen. Der HTML-Code ist unkompliziert:

<select name="">
  <option value="">Test</option>
</select>

Nach dem Login kopieren

Jetzt führen wir etwas CSS ein:

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select::after {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: blue;
}

Nach dem Login kopieren

Leider wird der Stil nicht wie erwartet gerendert. Der Entwickler ist verwirrt über den Fehler und sucht in den W3C-Spezifikationen nach Orientierung, kommt aber mit leeren Händen zurück.

Die Antwort: Eine potenzielle Einschränkung

Basierend auf Beobachtungen scheint es, dass das Hinzufügen von ::after zu Stil elements wird derzeit in WebKit nicht unterstützt. Diese Einschränkung ergibt sich wahrscheinlich aus der Art und Weise, wie das Betriebssystem diese Elemente generiert und dabei die Browsersteuerung umgeht.

Zusammenfassend lässt sich sagen, dass beim Stylen von