Pourquoi mon pseudo-élément CSS `::after` ne s'affiche-t-il pas dans une zone de sélection WebKit ?

CSS : après un non-rendu avec la boîte de sélection WebKit

Problème :

Manipulation des apparences de la boîte de sélection avec le CSS :: après le pseudo-élément pour créer une liste déroulante personnalisée sans images s'avère infructueuse. Malgré l'application de règles CSS appropriées, l'élément :after reste invisible.

HTML :

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

CSS :

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

Observation :

L'élément :after ne parvient pas à apparaître malgré le style appliqué.

Solution :

Malheureusement, il semble que cette personnalisation ne soit actuellement pas réalisable en raison de certaines limitations techniques des navigateurs WebKit. Le rendu des zones de sélection est souvent géré par le système d'exploitation plutôt que par le navigateur lui-même, ce qui limite la possibilité de contrôler entièrement leur apparence via CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!