Bonjour,
cpalo a écrit :
Ce que je cherchais à reproduire, c'était le carré blanc.
Ha, enfin !
Je ne cherchais donc pas du tout ce qu'il fallait chercher. Misère !
gcyrillus t'avait donc donné les bonnes pistes.
Dans ce qui suit, j'ai supposé que tu voulais afficher un carré plein au départ et un carré vide quand le contenu de la balise <details> est affiché.
A) Une solution à
https://jsfiddle.net/parsimonhi/s908cbhf/ :
1) où on supprime la propriété css display:block de la balise <summary> (comme je l'avais déjà indiqué précédemment, parce que sinon, le marqueur ne pourra pas s'afficher),
2) et où, dans le code css après /* Styles pour l'icône */, on utilise des marqueurs personnalisés comme le suggérait gcyrillus. J'ai mis des caractères représentant des carrés pleins et vides suivis d'un espace, mais on peut mettre ce qu'on veut (attention à la police de caractère : ce n'est pas toujours pareil d'une police à l'autre pour ce genre de caractères),
3) et où le reste du code peut être identique à la demo 2.
Note : cette solution ne marchera sans doute pas avec tous les navigateurs.
B) Une autre solution (à l'ancienne) à
https://jsfiddle.net/parsimonhi/g6a80q1w/ :
1) où on laisse si on veut display:block pour la balise <summary> parce que de toute façon, on va cacher les marqueurs,
2) et où, dans le code css après /* Styles pour l'icône */, on utilise le pseudo-élément :before pour afficher un carré plein ou vide selon que les détails sont affichés ou pas. On pourrait afficher à peu près n'importe quoi d'autre si on le voulait avec cette technique,
3) et où le reste du code peut être identique à la demo 2.
Amicalement,
Modifié par parsimonhi (17 Feb 2022 - 07:11)