[RESOLU] Modificationde l'aspect du focus par défaut

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 !!


Note : sujet initialement posté dans cette discussion qui traitait aussi du sujet et déplacé dans une nouvelle discussion pour plus de clarté

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 !

erreur de manipulation , voir dessous
Modifié par gc-nomade (02 Jan 2011 - 21:30)

Bonjour,

Chaque navigateur a sa propre feuille de style (ou rendu) par defaut.
Certaines de ces regles sont modifiables, d'autres non. Comme le outline sur les elements de formulaire de safari par exemple.
De plus, pour ce qui est des element de formulaires, ceux-ci ne sont que trés difficilement modifiable a l'affichage et les possibilités different d'un navigateur à l'autre.

En usant des posibilité des selecteurs css, on peut augmenter surpasser des style deja declaré.
par exemple:
:focus {outline:3px double red} sera appliqué a tout les elements capable de recevoir le focus (voir aussi tabindex), enfin c'est la theorie.
par exemple :

<div tabindex="1">div qui peut etre focaliser au click ou navigation au clavier <a href="#">lien<a>
<form><input type="text" value=""/>
<button>bouton</button>
</form>
</div>

Reste a tester ça dans chaque navigateur pour dénoté les différences.

Enfin, dans certain navigateur , l'outline des éléments de formulaire ne sera pas modifiable. C'est pas plus mal, au moins le visiteur saura reconnaitre un champ de formulaire sans equivoque.

GC

<edt ... un post tout recent trés interessant a lire http://forum.alsacreations.com/topic-1-52282-1-resolu-Ne-pas-visualiser-le-focus.html ; />
Modifié par gc-nomade (02 Jan 2011 - 21:29)

Super, merci GC pour ta réponse !

C'est dommage de ne pas pouvoir modifier le outline 1px dotted de Firefox, car c'est une demande de mon client, mais bon, si on peut pas, on peut pas !

Sinon concernant mon 1er problème sur le fait de devoir déclarer *:focus "qui ne sert à rien" avant un autre focus, j'ai trouvé la solution...

... ce matin, (merci la nouvelle année !) : révélation. Une énorme faute de frappe me saute aux yeux alors que j'ai rien vu pendant toute une journée l'année dernière !

J'avais :

*
* mon en-tete de fichier en commentaire
*/

*:focus{ outline:none; }

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

Donc la première ligne de mon commentaire (en-tête de fichier) avait sauté suite à une mauvaise manip, et tout devait être considéré comme commentaire jusqu'au prochain "/* ... */"... donc ma première instruction était considérée comme commentaire !

En mettant :

/*
 * mon en-tete de fichier en commentaire
 */

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

tout rentre dans l'ordre et j'ai le style de focus particulier qui s'applique juste sur mes boutons !

Je ne suis donc pas fou, tout a une explication !

Et bonne année à tous !
Modifié par tooliphone (03 Jan 2011 - 09:58)