Styling the HTML5 summary arrow for Firefox

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>

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;
}

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;
}