Styling the HTML5 summary arrow for Firefox

Question

I want to use the HTML5 summary element on Firefox. By default, the element is styled with a triangular arrow (see an example here). I want to change the color of this arrow. This question explains how this can be done for Chrome, but after testing it does not work for Firefox.

Is there a way to change the color of the arrow of the summary element with Firefox?

Answer 1

Removing the caret in Firefox and Chrome:

details summary { list-style-type: none; } /* Firefox */
details summary::-webkit-details-marker { display: none; } /* Chrome */
details summary::marker { display: none; }

<details>
  <summary>Open/Close</summary>
  Lorem ipsum dolor sit.
</details>

Answer 2

Currently on FF 68 I am able to customise the marker by doing:

summary::marker {
  color: red;
}

Make sure to try to apply the styles in a generic way (AKA avoid nesting classes so you are sure that the traverse is not a problem)

Also, as you probably are adding styles cross browser the below snippet doesn't work properly

summary::marker,
summary::-webkit-details-marker {
    color: $primary;
}

Instead I have to define it separately like so:

summary::marker {
  color: $primary;
}

summary::-webkit-details-marker {
  color: $primary;
}

Answer 3

You can use list-style-type in Firefox (and perhaps Edge/Safari) to style the arrow [css-tricks].

/* replace with custom image */
summary {
  list-style-image: url(right-arrow.svg);
}

/* hide arrow */
summary {
  list-style-image: none;
}