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?

score 14 · Answer 1 · answered Feb 26 '20 at 10:10

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>

Alexis Duran · Accepted Answer · 2019-08-24T10:08:22.427

9

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

edited Aug 24 '19 at 10:08

answered Aug 24 '19 at 10:00

Alexis Duran

620
14
28

2

Thanks! I think that's the best answer currently -- no need for an additional `span`, no need to redefine the arrow manually. BTW, I guess the reason why you have to define separately is https://stackoverflow.com/questions/13816764/invalid-css-selector-causes-rule-to-be-dropped-what-is-the-rationale (because each of Firefox and Chrome won't understand the other's selector). – a3nm Aug 25 '19 at 15:42

score 2 · Answer 3 · answered Nov 01 '18 at 20:09

2

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

answered Nov 01 '18 at 20:09

Paul Irish

47,354
22
98
132

score 1 · Answer 4 · answered Dec 07 '18 at 10:15

/* Hide default arrow */     
summary::-moz-list-bullet {
   list-style-type: none;
   display: block;
}
/* Create customizable arrow */       
summary:before {
   content: ' ';
   border: solid #939faa;
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 0 5px 5px 0;
   transform: rotate(-45deg);
}

http://www.otsukare.info/2016/04/19/summary-details

score 1 · Answer 5 · answered Feb 05 '20 at 14:56

Gotcha: if you use normalizer (normalize.css etc.) or something similar, in order to hide the ::marker in Firefox in macOS, you have to style both <summary> and the ::marker:

  summary {
    display: block;
  }

  summary::marker {
    display: none;
  }

Otherwise <summary> will get its styles from elsewhere (normalizer etc.) and it could be something like display: list-item, which will prevent you from hiding the marker.

score 0 · Answer 6 · edited Nov 01 '18 at 20:13

0

details > summary:first-of-type {
    color: blue;
}

This CSS will work on Firefox, but you will still need to use the original method for Chrome.

edited Nov 01 '18 at 20:13

TylerH

20,799
66
75
101

answered Aug 13 '18 at 21:29

static_null

194
4
14

1

Thanks, but this changes the color of the whole `summary` element (not just the arrow). That said, based on this, I guess I could style the `summary` element (with the arrow), and then put the actual contents of the `summary` element in a `span` that I would style differently. If you think that this is the best solution, feel free to edit your answer accordingly. – a3nm Aug 13 '18 at 22:26

score 0 · Answer 7 · answered Aug 17 '18 at 11:06

A simple workaround to change the color of the summary arrow in Firefox is simply to change the color of the entire summary element, and put the contents of the element in a span styled in a different way.

For instance:

<style type="text/css">
summary {
  color: red;
}
.summary_contents {
  color: black;
}
</style>

And:

<details>
  <summary>
    <span class="summary_contents">foobar</span>
  </summary>
  [...]
</details>

Styling the HTML5 summary arrow for Firefox

7 Answers7