48

我在我的网站中使用了该<details>元素，并且我想更改展开/折叠箭头的设计。是否可以设置图片而不是现有字符？

另外，是否可以更改箭头的位置？我希望它在右侧，而不是在摘要文本旁边。

4

5 回答 5

58

由于<summary>has dipslay: list-style，可以通过设置属性来自定义公开标记：list-style-type

details > summary {
    list-style-type: '▶️';
}

details[open] > summary {
    list-style-type: '';
}

details {
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.5rem;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}
<details>
<summary>An example</summary>

With some example text shown when expanded.
</details>

不幸的是，一些当前一代的浏览器（嗯，Safari ......）仍然不支持这个。一种解决方法是设置list-style: none，然后content通过::marker伪元素提供自定义。这仍然可以用于提供进一步的定制。除了……好吧，Safari也不支持::marker，它只支持非标准的::-webkit-details-marker。它不支持在其中设置自定义内容。因此，我们需要隐藏元素并通过以下方式设置实际图标::before：

details > summary {
    list-style-type: none;
}

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

details > summary::before {
    content: '▶️';
}

details[open] > summary::before {
    content: '';
}

details {
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.5rem;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}
<details>
<summary>An example</summary>

With some example text shown when expanded.
</details>

于 2012-05-30T09:37:33.253 回答
6

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

这当然是可能的——将baskground 图像设置为您的图标并将原始标记的颜色设置为透明会产​​生这种效果。

例子：

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 父级中的元素；如果在整个文档中使用多个文本方向，请小心使用这种方法。

于 2015-09-17T00:20:57.013 回答
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>

很简单！

于 2021-02-05T11:05:28.753 回答
1

我找到的最好的代码是在http://html5doctor.com/the-details-and-summary-elements/上，这个巧妙的小技巧站得住脚。你可以在伪元素中放置任何你想替换的图标。

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: red;
  border-radius: 5px;
  content: "+";
  color: #fff;
  float: left;
  font-size: 1.5em;
  font-weight: bold;
  margin: -5px 10px 0 0;
  padding: 0;
  text-align: center;
  width: 20px;
}
details[open] summary:after {
  content: "-";
}

代码输出图片

链接到一个小站点，您可以在该站点上使用开发工具来查看它是如何工作的http://output.jsbin.com/egefop/15#html,live

于 2020-08-10T01:38:18.707 回答
0

MDN 说

您还可以更改要显示的样式：块以删除显示三角形。

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

summary {
  display: block;
}

summary::after {
  margin-left: 1ch;
  display: inline-block;
  transition: 0.2s;
  content: '\203A'; /* chevron */
}

details[open] summary::after {
  transform: rotate(90deg);
}
<details>
  <summary>Summary</summary>
  Details provided if clicked.
</details>

于 2021-10-26T11:57:25.143 回答