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

I'm not sure if this will work, given that my current computer will not run Chrome and I do not have access to the computer I normally use, but try adding this to your css file:

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

Do tell me if it works, I only saw it in a recommendation, not an official spec.