我可以替换<details>元素的展开图标(▶)吗？
我可以替换<details>元素的展开图标(▶)吗？
提问于 2012-05-30 17:32:38
我在我的网站中使用了<details>元素，并且我想更改展开/折叠箭头的设计。是否可以设置图片而不是现有的字符？
另外，是否可以改变箭头的位置？我希望它在右边，而不是在摘要文本旁边。
回答 2
Stack Overflow用户
发布于 2021-02-05 19:05:29
您可以直接添加此样式
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>
这很简单！
Stack Overflow用户
发布于 2020-08-10 09:38:19
我找到的最好的代码是在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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10813581
复制相关文章
相似问题