css - Replace the expand ( ?) icon of HTML5 details tag

Question

I use the <details> tag in my website and I want to change the design of the expand/collapse arrows. Is it possible to set a picture instead of the existing characters? Is it possible to change the position of the arrows? I want it to be on the right side and not next to the summary text.

Answer 1

According to MDN’s section on the topic, customising the disclosure marker, the standards-compliant way to do this is via the list-style CSS property, since <details> tags have display: list-item applied to them.

Unfortunately Chrome does not support this (yet), and requires customisation via the -webkit-details-marker pseudo-element.

To make styling easy and consistent across browsers, you can hide both the list-item marker and the WebKit marker, and then add the actual icon in the ::before pseudo-element:

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>