我用<details>我的网站中的元素，我想更改展开/折叠箭头的设计。是否可以设置图片来代替现有的字符？
另外，可以改变箭头的位置吗？我希望它位于右侧，而不是摘要文本旁边。
Since <summary> has display: list-style, 自定义披露标记 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget可以通过设置来完成list-style-type https://developer.mozilla.org/en-US/docs/Web/CSS/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 ...）still不支持这个。一种解决方法是设置list-style: none，然后提供自定义content通过::marker https://developer.mozilla.org/en-US/docs/Web/CSS/::marker伪元素。这仍然可以用于提供进一步的定制。除了……好吧，Safari 也不支持::marker，仅支持非标准::-webkit-details-marker。并且不支持在其中设置自定义内容。所以我们需要hide元素并通过设置实际图标::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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
