Pourquoi mon style de pseudo-élément CSS ne fonctionne-t-il pas sur les zones de sélection ?

Style des éléments de sélection avec CSS : bizarreries dans les zones de sélection avec des pseudo-éléments

Lorsque vous essayez de styliser les zones de sélection à l'aide de pseudo-éléments dans WebKit Dans les navigateurs tels que Safari et Chrome, un comportement inattendu peut survenir. Vous vous demandez peut-être pourquoi le code suivant ne produit pas l'effet souhaité :

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

Le problème vient de l'implication du système d'exploitation dans le rendu des éléments sélectionnés. Bien qu'il s'agisse d'éléments HTML, les zones de sélection sont généralement rendues par le système d'exploitation, ce qui peut entraver les efforts de style personnalisé. Cette limitation affecte à la fois les navigateurs basés sur WebKit ainsi que d'autres moteurs de rendu dépendants du système d'exploitation.

Par conséquent, le style des éléments de sélection à l'aide de pseudo-éléments, tels que le sélecteur :after dans l'exemple ci-dessus, peut ne pas avoir les effets escomptés ou peuvent se comporter de manière incohérente selon les différents systèmes.

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!