由于<summary>具有display: list-style，因此可以通过设置list-style-type属性来自定义披露标记：

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>

不幸的是，一些当前一代的浏览器（咳咳，Safari ...）* 仍然 * 不支持这个。一种解决方法是设置list-style: none，然后通过::marker伪元素提供自定义content。这仍然可以用于提供进一步的自定义。除了...嗯，Safari也不支持::marker，它只支持非标准的::-webkit-details-marker。并且它不支持在其中设置自定义内容。所以我们需要通过::before * 隐藏 * 元素并设置实际的图标：
一个二个一个一个

是否可以设置一个图片来代替现有的字符？
这当然是可能的─将baskground图像设置为您的图标，并将原始标记的颜色设置为透明，就会产生这种效果。
示例：

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

这仅适用于Webkit浏览器和Chrome。您可能需要考虑旋转图标，而不是用其他图标替换它，在这种情况下，您可以使用以下命令：

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

如果图标原来是向下的，这个解决方案会旋转它。它还考虑了RTL父元素中的details元素;但是如果在整个文档中使用了多个文本方向，则要小心使用这种方法。

MDN says
也可以更改要显示的样式：块以删除显示三角形。
到2021年，所有主流浏览器都支持-webkit-details-marker，不再需要-webkit-details-marker。

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>

你可以只添加这些样式

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>

很简单！

我在http://html5doctor.com/the-details-and-summary-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: "-";
}

代码输出图片

链接到一个小站点，您可以在上面使用开发工具来查看它是如何工作的http：//output.jsbin.com/egefop/15#html，live

在尝试表示虚拟文件系统时，我使用了前面的答案和svg路径的组合，希望对其他寻找此功能的人有用。

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>