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

Question

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?

`details summary::-webkit-details-marker { display:none; }` (copied from the link in your question) does work in Chrome v80 https://jsfiddle.net/e2jLzumd/ — GreyRoofPigeon, Mar 24 '20 at 10:50
`details > summary::-webkit-details-marker { display: none; }` works for me in chrome 80, too. See bottom of this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget — Papooch, Mar 24 '20 at 10:58
remove the line: `summary::marker,` from your css - it seems to be breaking chrome — Pete, Mar 24 '20 at 11:32

score 4 · Answer 1 · edited Jan 26 '22 at 11:21

4

This works for me!

summary::marker {
  content: "";
}

edited Jan 26 '22 at 11:21

Luca De Nardi

2,280
16
35

answered Jan 24 '22 at 13:53

mmk

43
4

score -1 · Answer 2 · answered Apr 14 '21 at 08:16

-1

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

answered Apr 14 '21 at 08:16

Mike

1

Do note that this is SASS and not pure CSS – Luca De Nardi Jan 26 '22 at 11:21

score -4 · Answer 3 · answered Mar 24 '20 at 11:05

-4

    <!DOCTYPE html>
    <html>

    <head>
        <title>Page Title</title>
        <style>
            summary {
                display: block;
                /* works in firefox */
                list-style: none;
                /* works in firefox */
            }

            summary::after {
                display: block;
                list-style: none;
            }

            summary::-webkit-details-marker {
                display: none;
            }
        </style>
    </head>

    <body>

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

    </body>

    </html>

answered Mar 24 '20 at 11:05

Amit Singh

9

2

You seem to have copy/pasted the code from the question that the OP says doesn't work. There's no explanation about what, if anything, you've changed or why it should solve the problem. – Quentin Mar 24 '20 at 11:12
@Quentin: not quite, they used `summary::after` instead of `summary::marker`. Not that just posting the code without explanation makes this a helpful answer. – Martijn Pieters Mar 24 '20 at 12:35

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

3 Answers3