Comment pouvez-vous masquer la flèche qui est affichée par défaut sur l'élément HTML5 <details> dans Chrome?

Question

Je suis maintenant encore tôt, mais je sais aussi que vous êtes au top.

Je veux utiliser le HTML5 details element:

<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> 

A ce jour, la bêta Chrome 12 est le seul navigateur pour donner réellement la fonctionnalité des éléments de détails (en cliquant sur résumé permet de basculer le contenu des détails). Donc, pour répondre à la question suivante, vous voudrez probablement utiliser ce navigateur.

Savez-vous comment vous pouvez masquer la flèche qui est affichée par défaut sur un élément de détails dans Chrome?

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

EDIT

Essayé le code CSS suivant sans succès:

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

Il y a probablement une chance que nous aurons besoin de le cibler avec un certain sélecteur de pseudo bizarre comme details::-webkit-details-disclosure-widget ou il n'y a actuellement aucun moyen changer les choses du tout.

En outre, je trouve cela dans the specification:

Le premier récipient est prévu pour contiennent au moins une zone de ligne, et cette boîte de ligne est prévu pour contenir un widget divulgation (généralement un triangle ) , positionné horizontalement dans le capitalisme gauche des détails élément. Ce widget devrait permettre à l'utilisateur de demander que les détails de soient affichés ou masqués.

Answer 1

Je n'avais pas l'intention 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 pour le widget de communication:
  http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html

détails résumé :: - Webkit détails marqueur { display: none; }

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

Answer 2

Je ne sais pas si cela va fonctionner, étant donné que mon ordinateur actuel ne fonctionnera pas Chrome et 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 l'ai seulement vu dans une recommandation, pas une spécification officielle.

Answer 3

résumé :: - Webkit détails marqueur { font-size:0px }

✔

Answer 4

Je trouve cela fonctionne assez bien.

:: - webkit-détails-marqueur {affichage: aucun; }