我可以替换 <details> 元素的展开图标 (▶) 吗？

Question

我在我的网站中使用了 <details> 元素，我想更改展开/折叠箭头的设计。是否可以设置图片而不是现有字符？

另外，是否可以更改箭头的位置？我希望它位于右侧而不是摘要文本旁边。

原文由 benams 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 <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 设置实际图标：

 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>

原文由 Konrad Rudolph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

是否可以设置图片而不是现有字符？

这当然是可能的 ─ 将背景图像设置为您的图标并将原始标记的颜色设置为透明将产生这种效果。

例子：

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

如果图标最初指向下方，则此解决方案会旋转图标。它还会影响 details RTL 父元素中的元素；如果在整个文档中使用多个文本方向，请谨慎使用此方法。

原文由 Ravi Menon 发布，翻译遵循 CC BY-SA 4.0 许可协议