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

问题描述

| 我现在还很早，但我也知道你们在上面。 我想使用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是唯一实际提供details元素功能的浏览器（单击摘要可切换细节内容）。因此，要回答以下问题，您可能要使用该浏览器。 您知道如何隐藏默认情况下在Chrome的details元素上显示的箭头吗？ 有点像Webkit中的默认样式ѭ1（请参阅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

）来定位它，或者根本无法改变任何东西。 此外，我在规范中发现了这一点：   预计第一个容器   至少包含一个线框，以及   该行框应包含一个   披露小部件（通常是   三角形），水平放置   在细节的左侧填充内   元件。该小部件有望   允许用户请求   显示或隐藏详细信息。     

解决方法

        我不打算回答自己的问题，但我有解决方案。 资源： 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;
}

请注意，如果您未提供规范允许的摘要元素，则仍会显示披露小部件。     ,        鉴于我当前的计算机无法运行Chrome，并且我无权访问我通常使用的计算机，因此我不确定这是否会起作用，但是请尝试将其添加到您的css文件中：

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

请告诉我它是否有效，我只是在推荐中看到它，而不是官方规格。     ,        我觉得这很好用。 ::-webkit-details-marker {display：none; }     ,        根据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;
}

    ,        我使用的是Firefox 65.0.1，可以通过以下方式删除箭头：

details > summary {display:block}

    ,        摘要：：-webkit-details-marker {

font-size:0px

} ✔