Menu

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

Messages postés
165
Date d'inscription
mardi 24 avril 2012
Statut
Membre
Dernière intervention
21 mai 2019
- - Dernière réponse : Zepines
Messages postés
30
Date d'inscription
mardi 14 mai 2019
Statut
Membre
Dernière intervention
24 juin 2019
- 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
Afficher la suite 

1 réponse

Messages postés
30
Date d'inscription
mardi 14 mai 2019
Statut
Membre
Dernière intervention
24 juin 2019
4
0
Merci
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.

Zepines
Messages postés
30
Date d'inscription
mardi 14 mai 2019
Statut
Membre
Dernière intervention
24 juin 2019
4 -
Petite erreur dans mon code, il faut remplacer
details
par
summary
.
Commenter la réponse de Zepines