[résolu] Ne pas visualiser le focus

(reprise du message précédent)

Bonjour,

Je suis en train d'essayer de modifier le outline par défaut afin d'en avoir un commun à tous les navigateurs lorsque mon élément a le focus.

Je remarque deux choses curieuses, et j'aimerais avoir votre aide pour comprendre / avoir la solution à mes problèmes !

1 - Syntaxe pour surcharger le outline des éléments qui auront le focus

Si je fais :

*:focus {
	outline: 2px solid #ff6600;
}

ou :

:focus {
	outline: 2px solid #ff6600;
}

ou :

*:focus, :focus {
	outline: 2px solid #ff6600;
}

Alors mon style ne s'applique pas ! Je conserve le style par défaut du navigateur (1px dotted pour Firefox, 5px solid blue pour Safari)

Par contre si je fais :

*:focus {
	outline: 2px solid #ff6600;
}
:focus {
	outline: 2px solid #ff6600;
}

Alors mon style de "2px solid #ff6600" apparait bien (!)



2 - Le problème de Firefox avec les boutons

Une fois ce qui est ci-dessus appliqué, j'ai un soucis sous Firefox.
Mon élément est bien entouré de ma bordure orange (#ff6600), mais il subsiste un cadre de pointillés (1px dotted) à l'intérieur de mon bouton !

Alors que Safari remplace totalement la bordure bleue initiale par ma bordure orange, Firefox ajoute ma bordure orange, mais conserve la sienne par défaut.
Ceci se produit pour les éléments de type "button" (les boutons, les radio boutons...)

J'aimerais bien vraiment surcharger le style du user agent et ne garder que ma bordure orange...

Merci pour votre aide !
Et bonne année !!
Modifié par tooliphone (31 Dec 2010 - 15:31)

Décidément je comprend vraiment pas...
Juste pour info je confirme que j'ai le même comportement en spécifiant un type d'élément particulier.

En testant sous Safari (car visuellement plus simple de voir que le style par défaut de 5px bleu s'applique ou pas), mais idem sous Firefox :

button:focus { outline: 2px solid red; }

Le style par défaut s'applique sur TOUS les éléments, Y COMPRIS les boutons (balise HTML "button").

*:focus { outline: none; }
button:focus { outline: 2px solid red; }

Le style par défaut s'applique sur TOUS les éléments, SAUF les boutons (balise HTML "button") qui ont une bordure rouge.

Il semble donc qu'il faille un "*:focus" défini pour que les spécifiques soient pris en compte... Mais que ce qui y est défini ne s'applique pas ! En effet, ce "*:focus" défini à "none" laisse pourtant le style "par défaut" s'appliquer !

Vérification faite :

*:focus { outline: 2px solid green; }
button:focus { outline: 2px solid red; }

Le style par défaut s'applique sur TOUS les éléments, SAUF les boutons (balise HTML "button") qui ont une bordure rouge. Pour les autres éléments, c'est bien le style par défaut du navigateur, mais jamais la bordure verte qui est affichée...


Ce qui rend encore plus troublant mon premier post...

*:focus { outline: 2px solid green; }
:focus { outline: 2px solid red; }

TOUS les éléments (input, button, liens...) sont entourés d'une bordure rouge.

Alors que :

*:focus { outline: 2px solid green; }
a:focus { outline: 2px solid red; }

TOUS les éléments ont le style du navigateur par défaut, SAUF les liens (balise a) qui sont entourés d'une bordure rouge.

Or, je croyais après des recherches à l'instant que la pseudo-classe ":focus" était un raccourci d'écriture pour "a:focus"...

Bref, j'y perd mon latin !

Bonjour tooliphone,

Le sujet appartient à Kleduts. Merci de bien vouloir créer ton propre sujet.

- C'est plus respectueux pour Kleduts de ne pas mélanger les conversations et les problèmes. Ça lui évite aussi de recevoir des notifications par courriel si tu obtiens de l'aide à ton problème.
- Avec ton propre sujet, tu recevras les notifications de nouvelle réponse par courriel
- Le sujet actuel est indiqué comme résolu, alors les membres passeront presque automatiquement leur chemin, ce qui limite tes chances d'obtenir de l'aide
- C'est aussi la politique de la maison : un auteur = un sujet

ok désolé !

je n'avais pas percuté le coup des notifications, j'ai profité de poursuivre sur ce sujet car cela traitait vraiment de ma problématique de départ, donc c'était une continuation logique, je trouvais intéressant d'avoir en tête la discussion de ce post avant de répondre à mon problème...

Pas de problèmes, je vais créer nouveau un sujet, et faire un lien vers ce post... ce sera plus propre !

A+

pour info, mon problème est résolu, voir ici.

Tu peux aussi enlever le focus en JS une fois que la personne a cliqué sur l'élément, je sais pas ce que ça vaut niveau accessibilité mais ça ne devrait pas bloquer la navigation au clavier :

onclick="this.blur();"

EDIT: non en fait ça gène la navigation au clavier sous IE, Chrome... (mais c'est OK sous Firefox).
Modifié par jb_gfx (04 Jan 2011 - 17:42)