自定义html5中的details元素

最新推荐文章于 2025-06-05 20:49:21 发布

大拿加拿大

最新推荐文章于 2025-06-05 20:49:21 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： details

本文链接：https://blog.youkuaiyun.com/zgrbsbf/article/details/83345226

本文介绍如何通过CSS自定义HTML5中的details组件样式，包括移除默认的三角形图标，用自定义的+-符号替代，并实现开关效果。适用于希望提升网页交互体验的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果如下：
在这里插入图片描述

参考文献：
https://codepen.io/jdsteinbach/full/GYmQjo/