Ability to style summary element arrow

Garbee · 2017-01-23

The summary element has an arrow to display to the user whether the contents are being displayed or not. This is good for a quick mock of an idea, however a lot of projects may wish to modify the styling of the arrow to fit their design. As things are now, only Chrome (possibly Safari) via summary::-webkit-details-marker exposes a way to touch the styling.

We should have a specification for how to target the details marker. This way developers can use standard CSS to change its color, or hide it in order to do their own styling. Could we possibly use ::details-marker as a new pseudo element for this?

smaug · 2017-01-23

So list-* , from https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements isn’t enough? list-style-image works (at least in browsers using list-*) for changing the image.

Doesn’t seem to work in Chrome though. Can’t test Safari. File implementation bugs? The spec is there (even if a bit vague).

Garbee · 2017-01-24

Ah, good catch in the spec! I’ll file a bug with Blink to see if we can’t get that added there. I’m unable to test Safari myself either so if someone that is capable of doing that would test and create a bug report if they don’t support list-style: none on the summary element then that would be fantastic.

Existing bug for Chromium which has some interesting discussion links within it as well.

phistuck · 2017-01-29

@Garbee - I just checked Safari (using BrowserStack) and list-style: none does not change a thing.

Test code -

data:text/html,<!doctype html><summary style="list-style: none">Summary<details style="list-style: none">Crap</details></summary> <details style="list-style: none"><summary \style="list-style: none">Wow</summary>Wowing</details>

Garbee · 2017-01-29

Yah, they use the same method Blink does currently with a pseudo element. I can tell that looking at their Layout Tests. I saw those a few days after this and forgot to come update, so thanks for testing that @phistuck.

So between all the vendors list-style:none and the pseudo selector for the arrow with display:none will get the default stuff hidden so developers have full control on custom elements internally to indicate open/closed state.