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

Posted 2023-03-05

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

【英文标题】：How can you hide the arrow that is displayed by default on the HTML5 <details> element in Chrome?

【发布时间】：2011-09-05 22:09:46

【问题描述】：

我现在还早，但我也知道你们已经在这上面了。

我想使用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 测试版是唯一真正提供详细信息元素功能的浏览器（单击摘要可切换详细信息内容）。因此，要回答以下问题，您可能需要使用该浏览器。

您知道如何隐藏 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：

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

【参考方案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;

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

【讨论】：

我看到的唯一问题是，一旦其他人开始支持<DETAILS>

，这将无法跨浏览器工作

这适用于 Chrome，但要支持 Firefox，这也是必需的：***.com/a/6195588/1293492 这两个答案应该合并。

我尊重这个答案在当时很棒，但现在我们应该有一个很好的跨浏览器、符合标准的解决方案，这里是特定于 webkit 的。

值得注意的是，现在这个元素有一个非 webkit 前缀的选择器：:marker 要实现这一点，您需要 ::marker display:none; summary list-style: none

如果您仍然希望小部件占用空间（例如，如果您想对齐几个连续 details 元素的文本，但并非所有元素都可以展开），那么您应该使用 visibility:hidden而不是display:none。

【参考方案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;

【讨论】：

对我来说，这是最合适的答案，因为它在 firefox、safari 和 chrome 上都对我有用

【参考方案3】：

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

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

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

【讨论】：

这适用于 Firefox，但为了支持 Chrome，这也是必需的：***.com/a/6202729/1293492 这两个答案应该合并。

【参考方案4】：

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

details > summary 
  list-style: none;

details > summary::marker 
  display: none;

【讨论】：

所有其他答案在 2021 年都不起作用，请改用这个目标。谢谢操作。

@eyecatchup 你知道如何防止它打开吗？我不想显示

@Luis 试试

【参考方案5】：

我觉得这很好用。

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

【参考方案6】：

我使用的是 Firefox 65.0.1，可以通过这种方式移除箭头：

details > summary display:block

【参考方案7】：

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

【参考方案8】：

将显示更改为“阻止”将删除箭头。

summary 
    display:block;

【讨论】：

这是 2022 年最简单的解决方案。，它工作正常。

【参考方案9】：

我在我的示例中看到，这只是将显示从列表项覆盖到其他项的问题。 因此，现在我们使用该类型的方式与使用 flex、grid 等相同。 - 所有这些都有他们的推荐属性。

:)

我的回答： 只需运行 devtools 并为属性显示和/或 list-style-type,list-style 设置自定义值。

details
background:yellow;
border-radius: 4px;
cursor:pointer;


summary
/* ANSWER BELOW*/
    list-style: none;
/* ANSWER ABOVE*/
    background:green;
    border:1px solid red;

<details>detail
<summary>summary</summary
</details>