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

Question

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

我想使用HTML5 details element：

<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中详细信息元素上默认显示的箭头？

它有点像Webkit中<input type="search" />的默认样式（参见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）来定位它，或者目前根本没有办法改变它。

此外，我在the specification发现了这个：

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

Answer 1

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

• 资料来源：http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
• 有关公开小部件的建议的更多信息： http://mail-archive.com/[email protected]/msg26129.html

码

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

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

Answer 2

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

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

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

Answer 3

我觉得这很有效。

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

Answer 4

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

details > summary {display:block}

Answer 5

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

你可以用：

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

Answer 6

摘要:: - webkit-details-marker {font-size:0px}

✔