Comment masquer la flèche qui s'affiche par défaut sur l'élément HTML5 <details> dans Chrome ?

Question

Je sais qu'il est encore tôt, mais je sais aussi que vous vous occupez de tout.

Je veux utiliser le Élément de détail HTML5 :

<details>
    <summary>What's the HTML5 details element?</summary>
    <p>The details element represents a disclosure widget from which the user can obtain additional information or controls.</p>
</details>

À ce jour, Chrome 12 beta est le seul navigateur à offrir la fonctionnalité de l'élément de détail (cliquer sur le résumé fait basculer le contenu du détail). Pour répondre à la question suivante, vous devrez donc probablement utiliser ce navigateur.

Savez-vous comment masquer la flèche qui s'affiche par défaut sur un élément de détail dans Chrome ?

C'est un peu comme le style par défaut de <input type="search" /> dans Webkit (voir http://css-tricks.com/webkit-html5-search-inputs/ ). Il est possible de le modifier, mais ce n'est pas évident.

EDIT

J'ai essayé le code CSS suivant sans succès :

details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}

Il est probablement possible que nous devions le cibler avec un pseudo-sélecteur bizarre comme details::-webkit-details-disclosure-widget ou il n'y a actuellement aucun moyen de changer les choses.

En outre, j'ai trouvé ceci dans le cahier des charges :

Le premier conteneur devrait contenir au moins une boîte à lignes, et cette boîte à lignes doit contenir un widget de divulgation (typiquement un triangle), positionné horizontalement dans l'espace gauche de l'élément details de l'élément "détails". Ce widget est censé permettre à l'utilisateur de demander que les d'afficher ou de masquer les détails.

Answer 1

Je n'avais pas prévu de répondre à ma propre question, mais j'ai la solution.

• Source : http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
• En savoir plus sur la recommandation relative au widget de divulgation :
  http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html

Code

details summary::-webkit-details-marker {
  display:none;
}

Notez que le widget de divulgation sera toujours affiché si vous ne fournissez pas d'élément de résumé, ce qui est autorisé par la spécification.

Answer 2

Selon le https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget

Vous pouvez y parvenir avec :

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

Answer 3

Revisitant en 2021, le ::-webkit-details-marker n̶o̶ ̶l̶o̶n̶g̶e̶r̶ fonctionne uniquement pour Safari. Pour tous les autres navigateurs modernes, vous devez cibler le pseudo-élément ::marker comme suit :

details > summary {
  list-style: none;
}

details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

Codepen

Answer 4

Je ne suis pas sûr que cela fonctionnera, étant donné que mon ordinateur actuel ne fonctionne pas avec Chrome et que je n'ai pas accès à l'ordinateur que j'utilise normalement, mais essayez d'ajouter ceci à votre fichier css :

details > summary:first-of-type {
    list-style-type: none;
}

Dites-moi si cela fonctionne, je ne l'ai vu que dans une recommandation, pas dans une spécification officielle.

Answer 5

Je trouve que cela fonctionne assez bien.

::-webkit-details-marker {
  display:none;
}