版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zgrbsbf/article/details/83345226
html5中的details的功能很好,但是默认的样式不好看…尝试修改。
- ::-webkit-details-marker伪元素修改 summary前面的三角形
- summary的::before和::after伪类制作一个 + - 表示的开关
- 使用details的open属性选择器在开关之间进行却换
下面是样式文件:
::-webkit-details-marker {
display: none;
}
summary {
position: relative;
cursor: pointer;
}
summary::before, summary::after {
width: .75em;
height: 2px;
position: absolute;
top: 50%;
right: 0;
content: '';
background-color: currentColor;
text-align: right;
transform: translateY(-50%);
transition: transform .2s ease-in-out;
}
details[open] summary::after {
transform: translateY(-50%) rotate(180deg);
}
summary::after {
transform: translateY(-50%) rotate(90deg);
}
下面是html代码:
<details open>
<summary>我是summary,点我可以展开</summary>
<p>我是展开内容</p>
</details>
效果如下: