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

Question

I now its still early but I also know you guys are on top of it.

I want to use the HTML5 details element:

What\'s the          


        

Answer 1

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

Answer 2

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

✔

Answer 3

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/whatwg@lists.whatwg.org/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.

Answer 4

I find this works well enough.

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

Answer 5

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.

Answer 6

I am on Firefox 65.0.1 and can remove the arrow this way:

details > summary {display:block}