web-dev-qa-db-fra.com

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

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

Je veux utiliser élément de détails 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>

Au moment de la rédaction de cet article, Chrome 12 beta est le seul navigateur à donner réellement la fonctionnalité de l'élément de détails (en cliquant sur le résumé, le contenu des détails est basculé). Donc, pour répondre à la question suivante, vous voudrez probablement utilisez ce navigateur.

Savez-vous comment masquer la flèche qui s'affiche par défaut sur un élément de détails 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/ ). Vous pouvez le changer mais ce n'est pas si évident.

[~ # ~] modifier [~ # ~]

J'ai 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 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.

De plus, j'ai trouvé cela dans la spécification :

Le premier conteneur devrait contenir au moins une zone de ligne, et cette zone de ligne devrait contenir un widget de divulgation (généralement un triangle), positionné horizontalement dans le remplissage gauche de l'élément de détails. Ce widget devrait permettre à l'utilisateur de demander que les détails soient affichés ou masqués.

csshtmlgoogle-chromesummarydetails
49
DADU

Je n'avais pas l'intention de répondre à ma propre question mais j'ai la solution.

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 récapitulatif, ce qui est autorisé par la spécification.

63
DADU

Je ne sais pas si cela fonctionnera, é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 ne l'ai vu que dans une recommandation, pas une spécification officielle.

15
Will Kunkel

Je trouve que cela fonctionne assez bien.

:: - webkit-details-marker {affichage: aucun; }

7
Crystal

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

details > summary {display:block}
2
Taufik Nurrohman

Selon 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;
}
1
thmsnhl

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

✔

0
user2121943