Hide the arrow on details summary element

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