替换HTML5详细信息标记的展开(▶)图标

Question

我<details>在我的网站上使用标签,我想改变展开/折叠箭头的设计.是否可以设置图片而不是现有字符？是否可以改变箭头的位置？我希望它在右侧,而不是在摘要文本旁边.

Answer 1

该HTML5Doctor文章有造型的例子:

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

演示

这使箭头巨大,红色背景上的白色.用图像替换标记更难.您必须完全删除标记并使用before或after伪类:

summary::-webkit-details-marker {
  display: none
}

summary:after {
  background: url(some-picture);
  float: left; 
  height: 20px;
  width: 20px;
  content: " ";
}

details[open] summary:after {
  background: url(other-picture);
}

Answer 2

MDN 说：

\n

\n

您还可以将样式更改为 display: block 以删除显示三角形。

\n

\n

截至 2021 年，所有主流浏览器都支持此功能，不再需要了-webkit-details-marker。

\n

然后，您可以使用::after伪元素在右侧创建一个新箭头：

\n

\r\n

\r\n

/* Remove the default triangle */\nsummary {\n  display: block;\n}\n\n/* Create a new custom triangle on the right side */\nsummary::after {\n  margin-left: 1ch;\n  display: inline-block;\n  content: \'\xe2\x96\xb6\xef\xb8\x8f\';\n  transition: 0.2s;\n}\n\ndetails[open] > summary::after {\n  transform: rotate(90deg);\n}

\r\n

<details>\n  <summary>Summary</summary>\n  Details provided if clicked.\n</details>

\r\n

\r\n

\r\n

\n

Answer 3

您只需添加此样式即可

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>

很简单！

Answer 4

是否可以设置图片而不是现有字符？

这肯定有可能吗？将背景图像设置为您的图标并将原始标记的颜色设置为透明将产生这种效果。

例子：

details summary::-webkit-details-marker {
    background: url(/images/toggle-expand.png) center no-repeat;
    color: transparent;
}
details[open] summary::-webkit-details-marker {
    background: url(/images/toggle-collapse.png) center no-repeat;
    color: transparent;
}

这仅适用于 Webkit 浏览器和 Chrome。您可能需要考虑旋转图标而不是用不同的图标替换它，在这种情况下，您可以使用以下方法：

summary::--webkit-details-marker {
    transform: rotate(-90deg);
}

details[open] summary::--webkit-details-marker {
    transform: rotate(0deg);
}

[dir="rtl"] summary::--webkit-details-marker {
    transform: rotate(90deg);
}

[dir="rtl"] details[open] summary::--webkit-details-marker {
    transform: rotate(0deg);
}

如果图标最初指向下方，则此解决方案会旋转图标。它还考虑了detailsRTL 父级中的元素；如果在整个文档中使用多个文本方向，请小心使用这种方法。