28234 sujets

CSS et mise en forme, CSS3

[Résolu] Bouton actif outline

Bonjour à tous
J'ai un <button> qui contient une icône en background-image upload/1578999574-48769-bouton.png .
Quand je clique dessus je vois apparaître un pointillé autour du contenu du bouton, c'est à dire un simple espace upload/1578999685-48769-bouton1.png
En cherchant dans la doc, je trouve des informations telles que
1) ça ne se produit que sous FireFox
2) ça s'enlève avec button:active {outline:none;}
Plus des discussions oiseuses sur le fait qu'il ne faudrait pas enlever ces pointillés à cause des gens qui naviguent au clavier
Je ne suis pas parvenu à supprimer ces pointillés.
Avez vous une solution?
Merci de votre aide
Administrateur
Bonjour,

Florens avait creusé le sujet et c'est je crois toujours valable 8-9 ans plus tard : https://fvsch.com/button-css/
Le mieux est de faire rentrer Firefox dans le moule pour qu'il fasse comme ses petits camarades avec ces 2 pseudos -moz- qui repositionnent l'outline là où on s'attend à les trouver, c'est-à-dire à l'extérieur de l'élément, autour.

Pour ce qui est de la question oiseuse, alors non cela concerne avant tout les personnes malvoyantes et retirer l'outline va vraiment les mettre dans la panade. Il y a maintenant une manière de supprimer l'outline au clic mais PAS au focus avec :focus-visible (donc là c'est bien pour les utilisateurs du clavier et tant pis pour les gens comme moi qui se servent du pointillé/outline pour dans une page A cliquer sur un lien, lire la page B, revenir en arrière à la page A et voir où est-ce qu'ils avaient cliqué 10 min avant pour continuer la lecture de la page A).
Encore Florens : https://fvsch.com/styling-buttons/
Modifié par Felipe (14 Jan 2020 - 12:27)
Meilleure solution
Merci de ta réponse, ça marche très bien.
Je dis "oiseux" parce que tout dépend des utilisateurs prévus pour une page donnée.
Je comprends que si on fait une page s'adressant au grand public, il faille se préoccuper de l'accessibilité, mais en l'occurrence il s'agit d'une page destinée aux administrateurs du site, prévue pour être utilisée sur un PC, dans laquelle on va charger de nouvelles images sur le site, déplacer des éléments à la souris, etc.
Il me semble tout à fait légitime de ne pas "salir" l'image avec des pointillés inutiles.
Mais plus généralement, ce qui m'intéresse ici c'est simplement de savoir comment faire ça en CSS.
A noter que si je mets une <div> avec une image il n'y a pas de pointillés. Je peux par défaut mettre des <div class="button"> et je n'aurai plus le problème, mais du point de vue sémantique ce n'est sans doute pas la chose à faire... Smiley cligne
Modifié par PapyJP (14 Jan 2020 - 13:02)
Felipe a écrit :
cela concerne avant tout les personnes malvoyantes et retirer l'outline va vraiment les mettre dans la panade.

Question annexe d'un ignorant dans le domaine: qu'est-ce que ça change pour un malvoyant qu'il y ait ou non des pointillés difficilement visibles à l'intérieur ou à l'extérieur d'un bouton?
Sujet clos
Aller à