


Pourquoi mon style de pseudo-élément CSS ne fonctionne-t-il pas sur les zones de sélection ?
Nov 30, 2024 pm 12:02 PMStyle 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express

Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement)
