Question

我想删除出现在<details>元素左侧的小箭头，但我不知道该怎么做。

谁能告诉我该怎么做？

谢谢

（顺便说一句，我确信通过编辑CSS样式可以轻松实现此目的）

Answer 1

MDN的details element article说：

<summary>元素支持list-style的简写属性及其直写属性（例如list-style-type），用于将显示三角形更改为您选择的任何形状（通常是list-style-image）。例如，我们可以通过设置list-style: none来删除披露窗口小部件图标。

Chrome尚不支持此功能，因此我们还需要使用其非标准的::-webkit-details-marker伪元素来自定义该浏览器的外观。

因此，请使用list-style-type属性和::-webkit-details-marker伪元素。

summary {
  list-style-type: none; /* Firefox */
}

summary::-webkit-details-marker {
  display: none; /* Chrome */
}

<details>
  <summary>Summary</summary>
  <p>text text text text text text text text text text text text text text text text text text text.</p>
</details>

如何从详细信息元素中删除项目符号？

1 个答案: