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

summary::-webkit-details-marker {
  font-size:0px
}

Answer 2

Je suis sur Firefox 65.0.1 et je peux enlever la flèche de cette façon :

details > summary {display:block}

Answer 3

Le fait de changer l'affichage en "bloc" supprimera la flèche.

summary {
    display:block;
}

Answer 4

Je vois dans mon exemple qu'il s'agit simplement d'écraser l'affichage d'un élément de la liste pour le remplacer par un autre. De nos jours, nous utilisons ce type de la même manière que nous utilisons flex, grid et c. - tous ces éléments ont leurs attributs de référence.

)

Ma réponse : Il suffit de lancer devtools et de définir des valeurs personnalisées pour les attributs display et/ou list-style-type, list-style.

details{
background:yellow;
border-radius: 4px;
cursor:pointer;
}

summary{
/* ANSWER BELOW*/
    list-style: none;
/* ANSWER ABOVE*/
    background:green;
    border:1px solid red;
}

<details>detail
<summary>summary</summary
</details>

Answer 5

Cette solution a fonctionné pour moi, car la solution la mieux notée ne fonctionnait pas sur Chrome pour moi. Il s'agit d'une variante de la solution originale.

details summary {
list-style: none;

}