(CSS?) Éliminer les lignes «sélectionnées» du navigateur autour d'une image hyperliée?

Question

La capture d'écran ci-jointe provient de OS X/Firefox 3. Notez que l'onglet central (une image) est entouré d'une ligne pointillée, apparemment parce qu'il s'agit de l'onglet sélectionné le plus récemment. Est-ce que je peux éliminer cette ligne pointillée en CSS ou JavaScript? (Hmmm ... l'image libre service d'hébergement a réduit la taille de l'image. Mais si vous pouviez voir, vous remarquerait une zone de sélection en ligne en pointillés autour du bloc.)

Screen Shot http://www.freeimagehosting.net/uploads/th.fadf78173b.png

Answer 1

Vous voulez ajouter la ligne suivante à votre css:

a:active, a:focus { outline-style: none; -moz-outline-style:none; } 

(En supposant que vos onglets sont effectuées en utilisant l'élément, bien sûr.)

[modifier] Sur demande de tout le monde, pour les futurs téléspectateurs, il faut noter que le contour est essentiel pour les navigateurs de clavier car il indique où se trouve votre sélection et, par conséquent, donne un indice pour savoir où votre prochain 'onglet' pourrait aller. Ainsi, il est déconseillé d'enlever cette sélection en pointillé. Mais il est toujours utile de savoir comment vous le feriez si vous le jugez nécessaire. Et comme mentionné dans un commentaire, si vous n'avez affaire qu'à FF> v1.5, n'hésitez pas à omettre le style -moz-outline: none;

Answer 2

En votre événement onclick, this.blur()

ou, mettre l'accent spécifiquement ailleurs.

Answer 3

Vous pouvez commencer par regarder les pseudo-classes: focus et: active, bien que vous ne devriez pas supprimer complètement la mise en forme de ces cas, car ils sont une aide précieuse d'utilisabilité.

Answer 4

Pour commencer, essayez cette

*,*:hover,*:focus,*:active { outline: 0px none; } 

Cela réduira cependant la facilité d'utilisation.

Vous souhaiterez appliquer sélectivement des effets alternatifs, le cas échéant, pour permettre aux personnes qui naviguent principalement avec la touche TAB d'avoir une idée de ce qui a actuellement le focus.

div.foo:active, 
div.foo:focus, 
div.foo:hover 
{ 
    /* Alternative Style */ 
} 

Answer 5

utilisant

*:focus {outline:0px;} 

enlèvera le style pour les entrées et textareas lorsqu'il est sélectionné avec la souris. Assurez-vous d'ajouter ces styles avec une bordure pour ces éléments de formulaire si vous choisissez de supprimer tous les contours sur: focus.