Can I replace the expand icon (▶) of the element?

by

Since <summary> has display: list-style, customising the disclosure marker can be done by setting the list-style-type property:

details > summary {
    list-style-type: '▶️';
}

details[open] > summary {
    list-style-type: '🔽';
}

details {
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.5rem;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}
<details>
<summary>An example</summary>

With some example text shown when expanded.
</details>

Unfortunately some current-generation browsers (ahem, Safari …) still don’t support this. One workaround is to set list-style: none, and then provide a custom content via the ::marker pseudo-element. This can still be used to provide further customisations. Except … well, Safari also doesn’t support ::marker, it only supports the non-standard ::-webkit-details-marker. And it doesn’t support setting custom contents within it. So instead we need to hide the element and set the actual icon via ::before:

details > summary {
    list-style-type: none;
}

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

details > summary::before {
    content: '▶️';
}

details[open] > summary::before {
    content: '🔽';
}

details {
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.5rem;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}
<details>
<summary>An example</summary>

With some example text shown when expanded.
</details>

More Related Contents:

  1. Animate text for landing page
  2. How do you get the footer to stay at the bottom of a Web page?
  3. CSS – Equal Height Columns?
  4. Floating elements within a div, floats outside of div. Why?
  5. How to style HTML5 range input to have different color before and after slider?
  6. Margin-Top not working for span element?
  7. Select elements by attribute in CSS
  8. 2 column div layout: right column with fixed width, left fluid
  9. How to add a scrollbar to an HTML5 table?
  10. Center a div in CSS [closed]
  11. Font Awesome not working, icons showing as squares
  12. How do I style the HTML5 form validation error messages with CSS?
  13. Right to Left support for Twitter Bootstrap 3
  14. override css for html5 form validation/required popup
  15. CSS values using HTML5 data attribute [duplicate]
  16. Two divs, one fixed width, the other, the rest
  17. How would you make two s overlap?
  18. How to auto adjust the height according to content in it?
  19. layer on top of PDF
  20. why is my content showing outside the div?
  21. How to get these two divs side-by-side?
  22. Why use an HTML5 semantic tag instead of div? [duplicate]
  23. How to display and hide a div with CSS?
  24. How to make responsive table [closed]
  25. Styling HTML and BODY selector to height: 100%; vs using 100vh
  26. Why adds extra top margin?
  27. How can I align 3 divs side by side?
  28. How to add bordered triangle over a div tag
  29. Trouble (vertically) Centering Text in another DIV with relative % sizing
  30. Canvas is stretched when using CSS but normal with `width` & `height` attributes

Leave a Comment