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

JSFiddle

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 select au 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?

11
demandé sur Evan Mulawski 2012-07-04 21:36:52

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.

8
répondu DigiKev 2014-09-03 15:22:15

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).

2
répondu ScottS 2012-07-06 19:15:07

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;
}
2
répondu user3153963 2014-01-07 14:39:55