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

Practical tips to conceal the arrow

Hiding the default arrow on a <details> element might sound like code magic, but it's a robust method defined in the HTML5 spec itself.

The cross-browser way: ::marker pseudo-element

The ::marker pseudo-element keeps arrows at bay across different browsers:

details > summary::marker {
    display: none; /* No arrows, no problem! */
}


The Chrome-specific way: ::-webkit-details-marker pseudo-element

In case you're worrying only about Chrome (and Safari), there's -webkit- prefix at your service:

details > summary::-webkit-details-marker {
    display: none; /* Chrome, meet Vanish. Vanish, meet arrow. */
}


The summary-less <details>:

The HTML5 spec lets a <details> dropdown exist without a summary. Should we encounter such a case:

details:not(summary) {
  list-style: none; /* No summary, no arrow! */
}


This makes sure no default list signatures or markers peek through.

Deeper Dive: More ways to control the 'arrow' and possibilities

Diving deeper in <details> element modification, we have a plethora of choices:

Adding custom styles with ::before or ::after pseudo-elements

Leverage ::before or ::after pseudo-elements to customize with visual cues or alternative icons.

Using custom icons as arrows

Express yourself with a custom icon. Include image URLs or icon fonts within the ::before pseudo-element:

details > summary::before {
    content: url('path-to-your-icon.png'); /* Custom icon party! 🎉*/
}


Testing across browsers

The display and behaviors of <details> vary per browser. Test your styles everywhere. BrowserStack or CrossBrowserTesting can be your trusty side-kicks.

Unsupported Browsers: Polyfill to the rescue

Alas, browsers like Internet Explorer do not support <details>. Rely on polyfills like javan/details-element-polyfill for a broad reach.

ARIA for accessibility

Customizing <details> should not hamper accessibility. Infuse ARIA attributes if needed, ensuring proper state and role communication for screen readers.