Warum funktioniert mein CSS-Pseudoelement-Styling bei Auswahlfeldern nicht?

Ausgewählte Elemente mit CSS formatieren: Macken in Auswahlfeldern mit Pseudoelementen

Beim Versuch, Auswahlfelder mithilfe von Pseudoelementen in WebKit zu formatieren Bei Browsern wie Safari und Chrome kann es zu unerwartetem Verhalten kommen. Sie fragen sich vielleicht, warum der folgende Code nicht den gewünschten Effekt liefert:

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

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

Das Problem ergibt sich aus der Beteiligung des Betriebssystems am Rendern ausgewählter Elemente. Obwohl es sich bei Auswahlfeldern um HTML-Elemente handelt, werden sie in der Regel vom Betriebssystem gerendert, was benutzerdefinierte Gestaltungsbemühungen behindern kann. Diese Einschränkung betrifft sowohl WebKit-basierte Browser als auch andere betriebssystemabhängige Rendering-Engines.

Aus diesem Grund ist die Gestaltung ausgewählter Elemente mithilfe von Pseudoelementen, wie z. B. dem :after-Selektor im obigen Beispiel, möglicherweise nicht möglich die beabsichtigten Auswirkungen oder kann sich systemübergreifend inkonsistent verhalten.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein CSS-Pseudoelement-Styling bei Auswahlfeldern nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!