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

YameFAZE Messages postés 204 Statut Membre -  
Zepines Messages postés 120 Statut Membre -
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 120 Statut Membre 227
 
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 120 Statut Membre 227
 
Petite erreur dans mon code, il faut remplacer
details
par
summary
.
0