Add `::-webkit-details-marker`

[Schweinepriester]

Coming from https://css-tricks.com/how-to-animate-the-details-element/

Turn off the default triangle: details summary::-webkit-details-marker { display:none; }. You can't animate that one.

=> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget

Chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser.

The intention seems to be that https://developer.mozilla.org/en-US/docs/Web/CSS/::marker will cover <summary> as well, but doesn't seem to be the case just yet.

https://stackoverflow.com/questions/6195329/how-can-you-hide-the-arrow-that-is-displayed-by-default-on-the-html5-details-e seems to gather some information as well.

Tried to find a spec or some docs like some -webkits have, but didn't yet manage to find anything.

[Malvoz]

The intention seems to be that https://developer.mozilla.org/en-US/docs/Web/CSS/::marker will cover <summary> as well, but doesn't seem to be the case just yet.

It is possible but it's different from:

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

I believe the following approaches are the standardized behaviors:

::marker {
  /* `display: none` doesn't work here. */
  content: none; /* Removes the disclosure triangle, in some browsers. */
}

content isn't supported inside ::marker in Safari (https://bugs.webkit.org/show_bug.cgi?id=204163), surprise surprise. 🙂

Another approach is to change the default display: list-item of the summary element, e.g.:

summary {
  display: inline-block; /* Removes the disclosure triangle. */
}

Or to unset the list-style of the summary element:

summary {
  list-style: none; /* Removes the disclosure triangle. */
}

I think the latter 2 options should be widely supported. Hopefully documentation such as MDN will be updated soon to reflect implementations and best practices.

https://web.dev/css-marker-pseudo-element/ is another resource showing how to customize the disclosure triangle.

[GPHemsley]

Looks like this is now covered by MDN data:
https://caniuse.com/mdn-css_selectors_-webkit-details-marker

(via mdn/browser-compat-data#10013)

There are no links to a spec or MDN entry, but this contains some contextual pointers:
mdn/browser-compat-data#9869 (comment)