Je voudrais ajouter une étendue avant le texte de l'intérieur
3 Réponses :
Cela dépendra de votre navigateur Web. Dans la dernière version de Firefox, cela fonctionne bien. Cependant, cela ne fonctionne pas dans la dernière version d'Internet Explorer.
Votre question est un peu chargée - et je soupçonne que c'est pourquoi il a été évité - vous demandez pourquoi cela ne fonctionne pas, plutôt que de la faire fonctionner.
Cela ne fonctionne pas car ce n'est pas vraiment une fonctionnalité prise en charge de Selectbox (encore!)
Je vous suggère de rechercher JavaScript pour obtenir le même résultat (et spécifiquement, le
6 commentaires
Il ne faut pas fonctionner dans Firefox tout autant que l'élément n'est pas autorisé à contenir des descendants HTML.
@JamesDonnelly pourquoi pas? La spécification spécifie ce qui est valide HTML et comment HTML Valide doit rendre. Manipulation de HTML non valide, AFAIK, est spécifique à la mise en œuvre
@blgt Dans ce cas, Firefox est clairement pas gérer correctement le HTML non valide. Le passage de ce Validateur de W3 donnera deux erreurs: Stray Start Tag
@JamesDonnelly Cette page dit qu'il "fait pas Définir "Que devriez-vous arriver
James Donnelly, Blgt est correct en ce que le navigateur Web ne doit pas supprimer le balisage non valide. Un grand nombre de web est effectivement marqué de manière incorrecte et cela va briser de nombreux sites. Le navigateur Web devrait entreprendre la meilleure entreprise pour faire ce que le développeur veut arriver réellement se produire. Il appartient au navigateur Web de décider exactement de savoir comment cela le fait, et c'est pourquoi vous obtenez une si grande différence entre la façon dont les différents navigateurs font des choses.
@AlastAircambell Le "meilleur Endeavour" Dans cette situation serait de supprimer les balises HTML et uniquement de la sortie de texte brut, car il semble que tous les autres navigateurs accessibles à Firefox font actuellement.
SPAN Confirmant que ce HTML est invalide. Firefox devrait supprimer complètement tous les éléments HTML de l'option et affichant uniquement du texte brut.
Vous ne devriez pas compter sur le fait que votre hack fonctionne sur Firefox, ne signifie pas que cela devrait également sur chrome.
Quoi qu'il en soit, le style sélectionne a toujours été frustrant et il n'est pas facile de personnaliser des éléments de sélection natifs.
Si vous recherchez un moyen de styler les éléments de sélection natifs, cela aidera peut-être:
de
https://catalin.red/making-html-dropdowns-not-suck/ < / a>
Un élément d'option n'est pas autorisé à avoir des éléments d'enfant.
J'ai étendu la même réponse, mais j'ai appliqué la couleur d'arrière-plan à l'élément d'option comme illustré dans cette liaison Jsfiddle:
https://jsfiddle.net/go4zee/6l0jjjoa/
Même si cela n'est pas autorisé, je peux voir des boîtes de couleur dans mon firefox 30.0 - alors qu'est-ce qui ne fonctionne pas exactement ?!
En chrome pas ...
Le violon lié fonctionne exactement comme vous dites que vous décrivez - il y a une boîte colorée, puis le texte. Ce n'est pas valide HTML cependant, il peut donc ne pas être cohérent entre les navigateurs
jsfiddle.net/kheema/08e0l9j2/3 est ce que vous voulez?
ça ne marche pas à Chrome @kheemapandey
oui vient de réaliser que. Selon la spécification faite par W3C
OPTION ELEMENT NE PEUT PAS ÊTRE CORMÉ. Et dans ce cas, c'est-à-dire la mise en œuvre correctement.HTML5 ajoute supposément ajoute le
Type d'entrée = "Couleur" < / a>, mais ce n'est pas encore bien pris en charge (voir Caniuse ). Ce sera une fonctionnalité cool une fois qu'elle bénéficie d'un soutien.