How can you hide the arrow that is displayed by default on the HTML5 <details> element in Chrome?

I didn't plan to answer my own question but I have the solution.

Source: http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
More about the recommendation for the disclosure widget:
http://mail-archive.com/[email protected]/msg26129.html

Code

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

Note that the disclosure widget will still be displayed if you don't provide a summary element, which is allowed by the spec.

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

You can achieve this with:

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

Related