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

Question

我现在还早，但我也知道你们已经掌握了它。

我想使用 HTML5 details 元素：

 <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 或者目前根本没有办法改变它。

此外，我在 规范 中发现了这一点：

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

原文由 DADU 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

• 资料来源： http ://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
• 有关披露小部件的建议的更多信息：

http://mail-archive.com/[e-mail]/msg26129.html

代码

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

请注意，如果您不提供规范允许的摘要元素，披露小部件仍将显示。

原文由 DADU 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据 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;
}

原文由 thmsnhl 发布，翻译遵循 CC BY-SA 4.0 许可协议