How to get Safari not to display the disclosure triangle on an HTML5 <details> <summary> tag in 2025

I hate blog posts with “in (insert current year here)” in the title, but it seems important here, because none of the stuff I’m finding in the usual locations, even StackOverflow, CSS-Tricks, or the Mozilla Developer Network really seems to be getting this right.

So, you’re using the HTML5 <details> tag, and you want to customize the disclosure toggle element on the <summary> tag? Most browsers play nicely with summary::marker in CSS, but not Safari.

Forget this (the old rule everyone has been recommending but that doesn’t seem to do anything, at least, not anymore):

details summary::-webkit-details-marker { display: none; }

Fortunately, the solution (at least, what seems at this very moment to be working for me) is even easier, once you find it:

details summary { list-style: none; }

(OK I did actually find this solution on the MDN link above, but it also includes the bit that I said doesn’t seem to do anything.)

A practical example

Let’s say you want to get rid of the triangle and replace it with a plus sign (+) that changes to a minus sign (-) when toggled open. You can certainly improve the aesthetics of this with color, or images, or some margin/padding tweaks, but this is the essence. Confirmed to be all you need in both Safari and Firefox (the only browsers I currently have installed on my Mac), but it should work in Chrome too.

details summary {
    list-style: none;
}
details summary::before {
    content: "+";
}
details[open] summary::before {
    content: "−";
}