Comment puis-je styliser une zone de sélection avec ::after dans WebKit ?

Élégant Éléments dans WebKit utilisant CSS : une énigme

Style Les éléments de WebKit présentent un défi unique. Les développeurs tentent souvent d'améliorer leur apparence en utilisant des pseudo-éléments CSS, tels que ::after. Cependant, dans certains scénarios, rencontrer des problèmes devient inévitable. Examinons une requête spécifique qui met en évidence cette énigme.

La requête : styliser un

Boîte avec ::after

Le but est de styliser un coffret en deux parties distinctes, sans s'appuyer sur des images. Le HTML est simple :

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

Maintenant, introduisons quelques 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;
}

Malheureusement, le style ne s'affiche pas comme prévu. Perplexe face à l'échec, le développeur cherche des conseils dans les spécifications du W3C mais revient les mains vides.

La réponse : une limitation potentielle

D'après l'observation, il semble que l'ajout de ::after à style Les éléments ne sont actuellement pas pris en charge dans WebKit. Cette limitation provient probablement de la manière dont le système d'exploitation génère ces éléments, en contournant le contrôle du navigateur.

En conclusion, lors du style

Les éléments peuvent sembler simples dans la plupart des navigateurs, WebKit présente un obstacle unique lorsqu'il s'agit d'utiliser ::after. Pour le moment, des approches alternatives peuvent être nécessaires pour obtenir les effets souhaités.

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!