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

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

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.

You can then use the ::after pseudo-element to create a new arrow on the right side:

/* Remove the default triangle */
summary {
  display: block;
}

/* Create a new custom triangle on the right side */
summary::after {
  margin-left: 1ch;
  display: inline-block;
  content: '▶️';
  transition: 0.2s;
}

details[open] > summary::after {
  transform: rotate(90deg);
}

<details>
  <summary>Summary</summary>
  Details provided if clicked.
</details>

Answer 3

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

Answer 6

I made it work with a combination of previous answers and svg path like this while trying to represent a virtual filesystem. Hopefully useful for anyone else looking for this feature.

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


details>summary::before {
    content: url('data:image/svg+xml;charset=UTF-8,<svg 
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="rgb(255, 216, 104)" d="M20,6H10L8,4H2C0.9,4 0,4.9 0,6v12c0,1.1 0.9,2 
2,2h16c1.1,0 2-0.9 2-2V8c0,-1.1 -0.9,-2 -2,-2zM2,6h4l2,2h10v10H2V6z"/></svg>');
}


details[open] > summary::before {
    content: url('data:image/svg+xml;charset=UTF-8,<svg 
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="rgb(255, 216, 104)" d="M20,4v4H4V4h16m0-2H4C2.89,2 2,2.89 
2,4v16c0,1.11 0.89,2 2,2h16c1.11,0 2-0.89 2-2V8c0-1.11 -0.89-2 -2-2z"/></svg>');}

<details>
  <summary>Click here</summary>
  Some text!
</details>