如何隐藏Chrome中HTML5 <details>元素上默认显示的箭头？

Question

我现在还很早,但我也知道你们都是最重要的.

我想使用HTML5详细信息元素:

<details>
<summary>What's the HTML5 details element?</summary>
<p>The details element represents a disclosure widget from which the user can obtain additional information or controls.</p>
</details>

在撰写本文时,Chrome 12 beta是实际提供详细信息元素功能的唯一浏览器(点击摘要切换详细信息内容).因此,要回答以下问题,您可能希望使用该浏览器.

您是否知道如何隐藏Chrome中详细信息元素上默认显示的箭头？

它有点像<input type="search" />Webkit中的默认样式(请参阅http://css-tricks.com/webkit-html5-search-inputs/).你可以改变它但不是那么明显.

编辑

尝试了以下CSS代码但没有成功:

details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}

可能我们需要用一些奇怪的伪选择器来定位它,details::-webkit-details-disclosure-widget或者目前根本没有办法改变它.

此外,我在规范中发现了这一点:

第一个容器应该包含至少一个行框,并且该行框应该包含一个公开小部件(通常是一个三角形),水平放置在details元素的左边框内.该小部件应允许用户请求显示或隐藏详细信息.

Answer 1

我不打算回答我自己的问题,但我有解决方案.

• 来源:http: //trac.webkit.org/timeline？from = 2011-04-15T16%3A33%3A41-0700 &precision = second
• 有关披露小部件的建议的更多信息:http:
  //mail-archive.com/whatwg@lists.whatwg.org/msg26129.html

码

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

请注意,如果您未提供规范允许的摘要元素,则仍会显示公开窗口小部件.

Answer 2

鉴于我当前的计算机无法运行Chrome而且我无法访问我通常使用的计算机,我不确定这是否有效,但请尝试将其添加到您的css文件中:

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

请告诉我它是否有效,我只是在推荐中看到它,而不是官方规格.

Answer 3

在 2021 年重新审视，::-webkit-details-marker不再有效。您需要::marker像这样定位伪元素：

details > summary {
  list-style: none;
}
details > summary::marker {
  display: none;
}

Answer 4

我觉得这很有效.

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

Answer 5

summary::-webkit-details-marker {
  font-size:0px
}

Answer 6

我在 Firefox 65.0.1 上，可以通过这种方式删除箭头：

details > summary {display:block}

Answer 7

根据https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget

您可以使用以下方法实现此目的：

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