'How to remove the arrow on the side of the summary element?

I have a summary in a details element:

<details>
  <summary>Hello</summary>
</details>

I have tried:

summary {
  display: block; /* works in firefox */
  list-style: none; /* works in firefox */
}

/* didn't work in any browser */
summary::marker,
summary::-webkit-details-marker {
  display: none;
}

/* Solution for Chrome and Safari? */

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

But none of those solutions actually works in chrome.

How do I remove this arrow in chrome too?

htmlcss


Solution 1:[1]

This works for me!

summary::marker {
  content: "";
}

Solution 2:[2]

summary {
  &::marker {
    content: "";
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Luca De Nardi
Solution 2 Mike

Related Questions