Problème décoration sur balise <summary> lors du clique

Fermé
YameFAZE Messages postés 201 Date d'inscription mardi 24 avril 2012 Statut Membre Dernière intervention 14 mars 2021 - 20 mai 2019 à 13:01
Zepines Messages postés 76 Date d'inscription mardi 14 mai 2019 Statut Membre Dernière intervention 26 janvier 2022 - 22 mai 2019 à 21:28
Bonjour,

Je possède des balises <details> accompagnées de balises <summary> et j'ai remarqué que sous certains navigateurs, lorsque l'on clique sur "Détails" pour afficher le texte masqué, un cadre bleu apparaît comme pour des liens. J'ai essayé différentes méthodes dont une qui semble fonctionner sur la plupart des navigateurs mais qui n'est toujours pas acceptée par Google Chrome.

/* Textes complémentaires */
summary,
summary:link,
summary:visited,
summary:hover,
summary:active {
	text-decoration: none;
	outline: 0;
	border: none;
	outline-style: none;
}


Merci d'avance.

Configuration: Ordinateur portable ASUS UX21E
Windows 7

1 réponse

Zepines Messages postés 76 Date d'inscription mardi 14 mai 2019 Statut Membre Dernière intervention 26 janvier 2022 218
Modifié le 22 mai 2019 à 20:05
Bonsoir @YameFAZE,

Ce cadre bleu apparaît lorsqu'un élément à le focus. Pour modifier l'apparence d'un élément HTML lors du focus tu dois utiliser la pseudo-classe
:focus
.

Par exemple :

details:focus {
 outline: 0;
}


Bonne soirée, Zepines.

0
Zepines Messages postés 76 Date d'inscription mardi 14 mai 2019 Statut Membre Dernière intervention 26 janvier 2022 218
22 mai 2019 à 21:28
Petite erreur dans mon code, il faut remplacer
details
par
summary
.
0