Firefox ne tient pas compte des contours et des styles de mise au point sur les éléments sélectionnés lors de L'utilisation de L'onglet
Contexte
Firefox 14 (et 13); des styles CSS d'être ignoré, sous certaines conditions,
Le Problème
en Utilisant le code CSS suivant:
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
Firefox 14 (et 13) ignorer ces styles lors de l'utilisation de Onglet pour basculer entre select éléments. En cliquant sur ces éléments après avoir utilisé Onglet affiche toujours le décrire.
Notes
- Spécifiquement style
selectau lieu de*n'a pas d'effet. - cela ne se produit qu'avec
selectéléments.
La Question
Est-ce un bug ou normal?
existe-il d'autres styles CSS qui doivent être utilisés pour éviter le contour d'apparaître indéfiniment?
3 réponses
Ceci est un bogue connu qui a donné lieu à plusieurs discussions sur le débordement des piles. D'après ce que J'ai lu, Mozilla a considéré que CSS est le mauvais endroit pour gérer ce comportement d'élément, et a choisi à la place de gérer par d'autres moyens. À ce moment, la seule solution est d'utiliser tabindex="-1" ou pour définir l'élément à afficher comme autre chose, et pour restaurer l'apparence et la sensation d'une liste déroulante - mais attention, ceci ouvre une boîte de Pandore en soi.
Si vous choisissez de le faire cela, j'ai eu du succès dans le passé avec la suite de quelque chose:
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
apparence indique au navigateur d'afficher l'élément comme autre chose, mais cela n'est pas uniforme d'un vendeur à l'autre. appearance: normal; est le spec, tandis que webkit remplace normal par aucun. -moz-appearance: radio-container; a été le seul moyen que j'ai trouvé pour afficher le texte dans l'option select choisie, tout en supprimant la flèche chrome pour une liste déroulante entièrement personnalisée. Cependant, essayez d'expérimenter avec les options jusqu'à ce que vous trouviez quelque chose qui fonctionne et n'ajoute pas l'anneau de mise au point que vous souhaitez personnaliser. Internet Explorer aura besoin d'autres kludge pour plier le select à vos besoins. Tout à fait possible, mais hors de portée pour cette question et réponse.
jusqu'à présent, le seul moyen que j'ai trouvé pour les surmonter est de définir l' tabindex='-1' (voir tripoter) ce qui, bien sûr, enlève complètement l'élément de la onglet chaîne de sélection. Cela ne serait pas bon pour l'interface utilisateur, et ma supposition n'est pas exactement ce que vous désirez (je suppose que vous voulez garder onglet accessibilité mais faites votre propre style pour mettre en évidence).
une autre solution est de définir un contour: none et de définir un box-shadow. Par exemple:
.my_elements:focus
{
outline: none;
box-shadow: 0 0 3px 0px red;
}