Can I replace the expand icon (▶) of the <details> element? - css

Question

I use the <details> element 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?
Also, 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

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>

Answer 2

Is it possible to set a picture instead of the existing characters?
This is certainly possible ─ setting the baskground image to your icon and setting the original marker's colour to transparent will produce this effect.
Example:
details summary::-webkit-details-marker {
background: url(/images/toggle-expand.png) center no-repeat;
color: transparent;
}
details[open] summary::-webkit-details-marker {
background: url(/images/toggle-collapse.png) center no-repeat;
color: transparent;
}
This only works in Webkit browsers and Chrome. You might want to consider rotating the icon instead of replacing it with a different one, in which case you can use the following:
summary::--webkit-details-marker {
transform: rotate(-90deg);
}
details[open] summary::--webkit-details-marker {
transform: rotate(0deg);
}
[dir="rtl"] summary::--webkit-details-marker {
transform: rotate(90deg);
}
[dir="rtl"] details[open] summary::--webkit-details-marker {
transform: rotate(0deg);
}
This solution rotates the icon if it is originally pointing downwards. It also factors in details elements that are within RTL parents; though be careful with this approach if mutliple text directions are used throughout the document.

Answer 3

MDN says
You can also change the style to display: block to remove the disclosure triangle.
As of 2021, this is supported by all major browsers, no need for -webkit-details-marker anymore.
summary {
display: block;
}
summary::after {
margin-left: 1ch;
display: inline-block;
transition: 0.2s;
content: '\203A'; /* chevron */
}
details[open] summary::after {
transform: rotate(90deg);
}
<details>
<summary>Summary</summary>
Details provided if clicked.
</details>

Answer 4

You can just add this styles
details>summary {
list-style-type: none;
outline: none;
cursor: pointer;
border: 1px solid #eee;
padding: 5px;
border-radius: 5px;
}
details>summary::-webkit-details-marker {
display: none;
}
details>summary::before {
content: '+ ';
}
details[open]>summary::before {
content: '- ';
}
details[open]>summary {
margin-bottom: 0.5rem;
}
<details>
<summary>Click here</summary>
Some text!
</details>
It is simple!

Answer 5

The best code I found was on http://html5doctor.com/the-details-and-summary-elements/, this neat little trick stands up. And you can put whatever you want to replace the icons in the pseudo-elements.
summary::-webkit-details-marker {
display: none
}
summary:after {
background: red;
border-radius: 5px;
content: "+";
color: #fff;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
}
Picture of Code Output
Link to a small site that you can use the dev tools on to see how it works http://output.jsbin.com/egefop/15#html,live