Details和summary标签处理

Html5中<details>标签下的<summary>标签,标准样式是三角尖,点击还有可见的边框。

CSS可以修改其样式(更换三角符,去掉边框),CSS代码:

details{
overflow:hidden;
height:auto;
padding-left:30px;
margin-bottom:10px;
position:relative;
display:block;
}
details[open]{
height:auto;
padding-left:30px;
margin-bottom:20px;
}

summary{
outline:none; /* 清除默认的边框 */
}

summary::-webkit-details-marker {
display: none; /* 清除默认的符号 */
}

summary:before {
content: "\2600"; /* 更换成新的图标 */
color: #FF0000;
margin-right: 10px;
}

以上CSS,在Firefox中,老图标未隐藏


附:常用特殊符号的代码(CSS插入时,用反斜杠):

符号 代码 符号 代码 符号 代码
25BA 25BC 25B2
25C4 2764 2708
21AF 21F5 27A4
2611 2612 2713
2714 2715 2716
2717 2718 2720
2724 2605 272D
2660 2663 2665
2666 2709 260E
2623 2605 2726
2600 25C6 25C8
25A3 2116 272E
2606 272A 2721
272F 272F 2735
2736 2738 2739
273A 2731 2732
2734 2733 273B
273D 274B 2746
2744 2745 21B6
21BB 21BA 27F3
27F2 21B7 9749

参考:https://www.cnblogs.com/xiaoshen666/p/10719457.html