Hide the arrow on details summary element

How do hide the arrow on the details summary element with CSS? Easy.

Sometimes you want to remove the default arrow that comes with the details/summary element so that you can use your own icon instead. This is pretty easy to do (after you spend an hour banging your head against the desk).

Okay, I say easy, but it took a bit of figuring it out.

The "arrow" on a summary element is a ::marker pseudo element, same as we have for the number or bullets on lists.

What didn't work

list-style: none;

I guess since it is not a list item.

display: none;

I thought that would work, and am not sure why not.

appearance: none;

I really thought that would work, as it's what we can use to hide the down arrow on a select element.

position: absolute;
top: -9999px;

Just get it off the screen already.

What kind of worked

color: transparent;

Okay, at least you can't see it now. And then I added height: 0px; but that didn't work, since the element is not a block or inline-block element.

What worked

Hide the arrow on a summary element on Firefox and Chrome

.accordion-item__title::marker {
  content: "";

Setting content: ""; removed the content from the ::marker, so there is now no arrow. This worked for me on Firefox and Chrome (and I presume Edge and Brave, etc), but it was still visible on Safari.

Hide the arrow on a summary element on Safari

.accordion-item__title::-webkit-details-marker {
  display: none;

It seems like Safari does not use the ::marker pseudo class, but does use the ::-webkit-details-marker pseudo class. Setting that to display: none; removed it from Safari.

Now I am free to use my own icon for the open/closed state for the details summary.

Filed Under:

  1. HTML
  2. CSS