英文:
How to remove bullet from details element?
问题
我想要移除出现在 <details> 元素左侧的小箭头，但我不知道如何做到。
有人可以告诉我如何做吗？
谢谢
（顺便说一下，我确信通过编辑 CSS 样式可以轻松实现这一点）
英文:
I'm wanting to remove the little arrow that appears on the left of <details> element, but I don't find how to..
Can anyone tell me how to do this ?
Thanks
(btw I'm sure that it's makeable easily by editing css styling)
答案1
得分: 3
MDN的details元素文章说：
**
<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>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</details>
英文:
The MDN's details element article says:
> The <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image). For example, we can remove the disclosure widget icon by setting list-style: none.
>
> Chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser.
Therefore, use list-style-type property and ::-webkit-details-marker pseudo element.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
summary {
list-style-type: none; /* Firefox */
}
summary::-webkit-details-marker {
display: none; /* Chrome */
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论