我在我的网站中使用了<details>
元素,并且我想更改展开/折叠箭头的设计。是否可以设置图片而不是现有的字符?
另外,是否可以改变箭头的位置?我希望它在右边,而不是在摘要文本旁边。
发布于 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>
这很简单!
发布于 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
https://stackoverflow.com/questions/10813581
复制相似问题