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

Signaler
Messages postés
180
Date d'inscription
mardi 24 avril 2012
Statut
Membre
Dernière intervention
26 avril 2020
-
Messages postés
49
Date d'inscription
mardi 14 mai 2019
Statut
Membre
Dernière intervention
1 avril 2020
-
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

Messages postés
49
Date d'inscription
mardi 14 mai 2019
Statut
Membre
Dernière intervention
1 avril 2020
56
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.

Messages postés
49
Date d'inscription
mardi 14 mai 2019
Statut
Membre
Dernière intervention
1 avril 2020
56
Petite erreur dans mon code, il faut remplacer
details
par
summary
.