20种简单的方式来为HTML详情元素添加样式 — CodesCode
学习简单的方法来为HTML详细元素设计样式，这是一个在网页上显示和隐藏内容都非常实用的元素
在本文中，我们将探讨一些简单的方法来样式化HTML的<details>元素，这个元素在网页上用于显示和隐藏内容非常有用。
在HTML中拥有一个简单的披露元素而无需JavaScript是非常方便的，但<details>元素的默认样式可能会让一些人望而却步。幸运的是，很容易改变这个元素的样式。
下面是使用<details>元素的一个示例目录。我们给它添加了一个简单的边框和一些内边距。
介绍 details 元素
这是<details>元素的基本代码：
<details> <summary>点击我！</summary> <p>让我告诉你！这里是一些隐藏内容！</p></details>基本上，任何HTML内容都可以放在<details>元素中。<summary>元素为用户提供了单击元素以显示更多内容的提示，而且它必须是<details>元素的第一个子元素。
下面是这段代码的实例：
让我告诉你！这里是一些隐藏内容！
让我们看看如何使用CSS来增强我们的<details>元素的外观。
背景颜色、边框和内边距
一种简单的方法来增强 <details> 元素的外观是添加一些填充以及边框或背景颜色。
添加边框
如上面的目录所示，一个简单的边框可以对 <details> 元素进行增强和定义，还可以加入一些填充和略微的边框半径：
details { padding: 10px; border: 5px solid #f7f7f7; border-radius: 3px;}这是我们在上面使用的简单代码来为我们的 ToC 添加样式。
添加背景颜色
让我们给我们的 <details> 元素添加一个背景颜色，而不是边框：
details { padding: 10px; background-color: #e4eaef; border-radius: 5px;}结果如下所示。
查看 Pen 样式化 HTML details 元素：添加填充和背景颜色，作者为 CodesCode (@CodesCode)，于 CodePen 上。
背景颜色使得元素有更好的定义，填充有助于在其中创建一些空间。
我们还可以给 <summary> 元素添加不同的背景颜色，以使其与其余内容区分开，并改变其文本颜色：
summary { background-color: #2196F3; color: white; padding: 10px;}查看 Pen 样式化 HTML details 元素：为 summary 元素添加背景颜色，作者为 CodesCode (@CodesCode)，于 CodePen 上。
请注意，更改 <summary> 元素的文本颜色也会更改标记箭头的颜色。这是因为这个箭头实际上附加在 <summary> 元素上，就像标记（例如项目符号）附加在列表项上一样。下面我们将看到如何分别对它们进行样式设置。
样式化标记
<summary> 元素的 display 属性设置为 list-item。因此，它默认的箭头（▶）可以像 HTML 列表项的默认标记一样进行更改。我们可以更改使用的字符，并且可以独立更改它的颜色。
更改标记颜色
让我们将默认标记设置为不同的颜色。为了好玩，还让我们增大标记的字体大小。我们可以通过 ::marker 伪元素来实现这一点：
summary::marker { color: #e162bf; font-size: 1.2em;}结果如下所示。
查看 Pen 样式化 HTML details 元素：更改标记颜色，作者为 CodesCode (@CodesCode)，于 CodePen 上。
这是一个不错的简单解决方案，但可惜的是 ::marker 在 Safari 中不支持，因此如果这是一个不可接受的问题，请查看下面的其他选项。
更改标记间距
默认情况下，标记箭头与摘要文本非常接近。它的 list-style-position 设置为 inside。如果我们将其更改为 outside，我们可以通过添加一些左侧填充来在摘要文本和标记之间添加间距。我们还需要添加一些左侧边距，以使三角形不会超出容器：
summary { list-style-position: outside; margin-left: 30px; padding: 10px 10px 10px 20px; border-radius: 5px;}结果如下所示。
查看 Pen 样式化 HTML details 元素：支持箭头和摘要文本的间距，作者为 CodesCode (@CodesCode)，于 CodePen 上。
我夸大了箭头标记和摘要文本之间的间距，仅为了让它显而易见。不幸的是，使用list-style-position: outside;与<summary>元素在Safari中不起作用。幸运的是，我们有其他选项，如下所示。
更改标记形状
我们<summary>元素上的标记不一定是三角形。我们可以用任何字符替换它：
summary { list-style-type: '⬇ ';} 注意我们使用了'⬇ '（箭头旁边有一个空格），这是我们上面尝试的间距的一种替代方法。
我们现在有了一个向下的箭头而不是一个三角形。 但是…当<details>元素展开时，这个向下的箭头不会改变。这是因为<details>元素有两个状态 – closed和open – 我们只设置了closed状态的标记样式。所以让我们也为open状态设置一个标记：
details[open] > summary { list-style-type: '⬆ ';}这一次，我们使用了向上的箭头。这给了我们下面显示的结果。
查看Pen Styling the HTML details element: changing the summary marker with list-style-type by CodesCode (@CodesCode) on CodePen。
该死！Safari再一次让我们失望，因为它也不支持<summary>元素上的list-style-type。但是请不要绝望，因为我们将在下面看到更多时髦的解决方法。
我们可以尝试各种其他字符，例如+和-，✓和Χ或✗，⋁和⋀，甚至可以玩其他字符，如★，或像🍏 🍌 🍓 🍋和🍐这样的彩色水果，但请记住，这些字符可能在所有系统上都不起作用，所以要小心一点，并且再次提醒，list-style-type在Safari中肯定不起作用。
为摘要元素创建自定义标记
正如我们上面看到的，即使我们可以为默认标记设置不同的字符，并赋予它样式，如颜色和字体大小，但可能会出现问题。更好的选择可能是完全删除标记，并创建一个完全自定义的替代方法。
删除自定义标记
与列表项标记一样，我们可以完全删除标记：
summary { list-style: none;}/* 唉，Safari又来了 */summary::-webkit-details-marker { display: none;}标准的list-style: none在除……（你能猜到吗？）…… Safari之外的所有浏览器上都有效。至少在这种情况下，还有一个专有的-webkit-选项。
注意：从<summary>元素中删除标记的另一种方法是为<summary>元素指定一个与list-item不同的display值，如block或flex。这适用于除……（我需要说吗？）…… Safari之外的所有浏览器。
现在我们的元素没有标记了。
查看Pen Styling the HTML details element: a details element with no marker by CodesCode (@CodesCode) on CodePen。
没有标记根本不会给出任何视觉提示，表明该元素可以点击，所以将其保持不变并不是一个好主意。
使用背景图像作为标记
我们可以将图像放在背景上，像这样：
summary { list-style: none; padding: 10px 10px 10px 40px; background: url(arrow.svg) no-repeat 14px 50%; background-size: 18px; font-weight: bold;}结果如下所示。
在CodePen上查看此示例：由CodesCode (@CodesCode) 创建 CodePen。
直接在<summary>元素上使用背景图像的缺点是，当<details>元素打开时，我们无法旋转它，因为无法直接在CSS中设置背景图像上的动画。（当然，我们可以为打开的状态使用不同的图像，但我们仍然无法为其添加动画效果，这更加有趣。）因此，如果我们要使用背景图片，最好将其放置在可以旋转和/或动画的元素上。
使用背景图像作为标记符的
让我们在::after伪元素内放置背景图像：
summary { display: flex;}summary::after { content: ''; width: 18px; height: 10px; background: url('arrow.svg'); background-size: cover; margin-left: .75em; transition: 0.2s;}details[open] > summary::after { transform: rotate(180deg);}这是此代码的实时演示。
在CodePen上查看此示例：由CodesCode (@CodesCode) 创建 CodePen。
我们在<summary>元素上使用了display: flex，以便在水平方向上轻松定位箭头。
这种设置的好处是，我们可以为箭头添加动画效果。（在Safari浏览器中似乎动画无法工作，但行为已经足够好，而且我对这个浏览器有点厌烦了！）
使summary元素看起来像一个选项卡
我们一直将<summary>元素设置为全宽，但其实我们可以不这样。通过进行以下简单更改，我们可以使它看起来更像一个选项卡：
summary { display: inline-flex;}下面展示了一个示例。
在CodePen上查看此示例：由CodesCode (@CodesCode) 创建 CodePen。
限制detailselement的宽度
到目前为止，我们的所有示例中<details>元素都会拉伸到其容器的整个宽度，因为它是一个块级元素。但是，我们可以为其设置不同的宽度，例如width: 50%;。或者，我们可以将其设置为内联显示，这样它的宽度就只有内容的宽度：
details { display: inline-block;}点击下面的选项卡以显示<details>元素的较窄宽度。
在CodePen上查看此示例：由CodesCode (@CodesCode) 创建 CodePen。
请尝试将display: inline-block更改为width: 50%。
将标记箭头放在summary的最右边
现在让我们尝试一些不同的东西，将标记箭头放在<summary>元素的右侧。由于我们一直使用的是display: flex，所以只需将justify-content: space-between添加到<summary>元素中即可将箭头移动到最右边：
summary { display: flex; justify-content: space-between;}查看由CodesCode（@CodesCode）在CodePen上创建的使用HTML details元素的样式：在summary::after上使用背景图像作为标记，右对齐。
在没有背景图像的情况下使用::after作为标记
我们还可以在没有实际图像的情况下使用::after。下面是一个使用只有边框的::after的例子：
summary::after { content: ''; width: 0; height: 0; border-top: 10px solid #15171b; border-inline: 7px solid transparent; transition: 0.2s;}下面是一个实时演示。
查看由CodesCode（@CodesCode）在CodePen上创建的使用HTML details元素的样式：使用summary::after和边框创建右对齐的标记。
现在我们有了在关闭和打开状态之间旋转的箭头。我们还为<details>元素添加了漂亮的阴影。
在不使用图像的情况下使用::after的另一种方法是在content属性中放置Unicode字符：
summary::after { content: "\25BC"; transition: 0.2s;}这将设置一个三角形形状（▼）作为我们的标记，如此CodePen演示所示。
有成千上万的Unicode符号，它们非常有趣。每个符号都有一个类似于U+25BC或U+025BC的代码。要在content属性中使用该代码，取+后面的字符，并将其放在content引号内，并在前面加上\： content: "\25BC"。如果开头有一个或多个零，可以省略它们。（例如，U+02248可以变为"\02248"或"\2248"。）
其他额外的内容
到目前为止，我们上面所做的已经足够了，但还有其他一些有趣的事情可以做，让我们在这里试试其中的一些。
悬停效果在details元素上
我们可以在<details>元素上设置不同的悬停效果。例如，我们可以这样做：
details { transition: 0.2s background linear;}details:hover { background: #dad3b1;}在我们的例子中，我们还可以在open状态下过渡<summary>文本的颜色：
details > summary { transition: color 1s;}details[open] > summary { color: #d9103e;}结果如下所示。
查看由CodesCode（@CodesCode）在CodePen上创建的使用HTML details元素的样式：背景和文字过渡效果。
我们也可以只为<summary>元素设置背景的变化。
动画效果打开和关闭details元素
哈哈，骗到你了！似乎不可能为<details>元素的打开和关闭设置动画效果。根据MDN的说法：
很遗憾，目前还没有内置的方法来在打开和关闭之间实现动画过渡。
不过，我们可以通过给<details>元素的内容添加动画效果来增加一些乐趣。例如，我们可以设置内容在揭示后淡入：
details article { opacity: 0;}details[open] article { animation: fadeIn .75s linear forwards;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }} 下面是结果展示：
请查看示例：@CodesCode在CodePen上演示设置HTML details元素的内容淡入效果。
另一个小技巧可能是以滑动的方式展示内容：
details { overflow: hidden;}details[open] article { animation: animateUp .5s linear forwards;}@keyframes animateUp { 0% { opacity: 0; transform: translatey(100%); } 100% { opacity: 1; transform: translatey(0); }}下面是结果展示：
请查看示例：@CodesCode在CodePen上演示设置HTML details元素的内容滑动效果。
<p这可能有点俗气，而且可能有点过头了，但试试也是值得的。不幸的是，这些动画只在第一次点击元素时起作用（除非浏览器开启了奇怪的开发工具！）。你基本上需要JavaScript的干预才能重复使用这种效果。
更改打开和关闭状态下的摘要内容
在上述示例中，无论<details>元素是打开还是关闭，<select>的文本始终相同。不过，我们可以修改它。首先，我们可以保留当前的“点击我”文字，并使用::after伪元素为每种状态添加一些额外的文本：
summary::after { content: "显示隐藏的内容";}details[open] summary::after { content: "隐藏额外内容";}这样给我们带来了下面的结果。
请查看示例：@CodesCode在CodePen上演示切换选择项的文本。
更改摘要光标
<details>元素的默认光标（或鼠标指针）有点奇怪。它在大部分时候是一个标准箭头，当鼠标悬停在<summary>文本上时，变为文本指针（I型光标）。
玩一下吧，让我们将光标改为手形光标（或“指针”）：
summary { cursor: pointer;}这会在悬停在<summary>元素上时，将鼠标指针设置为手形光标。如下图所示。
请查看示例：@CodesCode在CodePen上演示更改HTML details元素的摘要光标为手形光标。
我们也可以将光标设置在<details>元素上，这会强制在整个<details>元素上使用手形光标。不过，我更喜欢只在我们点击的元素上显示手形光标。
更改辅助功能焦点样式
如果我们通过键盘导航页面，我们可以通过Tab键到达<details>元素，然后通过按回车键打开它。在焦点状态下，<summary>元素有一个默认的轮廓。下图展示了不同浏览器中的显示效果。
它们大多相似：主要是一个简单的深色（蓝色或黑色）实心轮廓，宽约3px。
我们可以为聚焦的<details>元素设置很多样式，但让我们在这里做一些简单的概念证明，将轮廓线改为红色虚线：
summary：focus {outline：none;} summary：focus-visible {outline：3px dot.dot #ff0060;} summary {padding：10px;}
默认情况下，当我们单击<summary>元素时，焦点轮廓不会显示。但是，如果我们更改焦点样式，即使对于非键盘用户（即，当我们使用鼠标单击<details>元素时），该样式也会显示。因此，在上面的代码中，我们将outline设置为none，而是使用focus-visible设置样式，这意味着焦点样式仅对键盘用户可见（对于他们而言，实际上是有用的）。
下图显示了我们的新样式。
这里有一个实时演示。
请参阅Pen “样式化HTML详情元素：样式化焦点轮廓” by CodesCode（@CodesCode）在CodePen上。
我们可以通过动画、背景颜色等方式对此进行很多有趣的调整，当<details>元素处于焦点状态时。我将把它留给你进一步尝试。
使用多个细节元素，如手风琴列表
有建议协调多个细节元素的方式，即当一个细节元素打开时，另一个细节元素关闭。 HTML规范甚至提出了多个<details>元素之间共享的name属性来实现此目的。
目前只能使用HTML和CSS来实现这一点，但是使用JavaScript也可以使用一些巧妙的示例（例如这里，这里和这里）。
使用CSS时，最好的办法是使用一些上面提到的技术将当前打开的元素的样式与其他元素区分开来。
这是一个简单的示例：
细节{背景颜色：＃2196F3;} details [open] {背景颜色：＃ce0e99;}
请参阅Pen “样式化HTML详情元素：使用多个细节元素” by CodesCode（@CodesCode）在CodePen上。
样式化摘要中的标题
一些开发人员担心他们的HTML结构，喜欢在<summary>元素内放置一个标题元素。这是否有用，尚存争议，但默认呈现不好，标题位于箭头下面的一行。可以通过设置标题的display：inline或display：inline-block来修复此问题。
摘要h2 {显示：inline;}
您可以在CodePen上查看此演示。
结论
正如我们上面尝试显示的那样，有很多简单的方法来样式化<details>元素。设置边框、填充和背景颜色很容易，这些本身就极大地改善了外观。有关样式化默认标记的某些方法非常方便，但是考虑到Forrest的水果公司（）在样式化标记时存在很多问题，相比之下，最好避免使用该选项，而是创建一个完全自定义的标记元素。 （也就是说，在Safari中样式化标记不会破坏<details>元素。）
已经有人尝试仅使用CSS来为<details>元素做开合动画，但这种方式都只是折中的办法，所以不值得尝试。如果您真的想要实现动态的开合效果，您需要使用JavaScript。
要了解更多关于<details>元素的内容，请查看以下资料：
- MDN关于details元素的介绍
- whatwg.org关于details元素的规范
如果您有其他酷炫的样式方式来装饰<details>元素，请在Twitter上告诉我，我们可能会在这里展示。
Leave a Reply