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

你知道如何隐藏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）来瞄准它，或者目前根本没有办法改变它。

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

第一个容器应至少包含一个行框，以及该行框应包含公开小部件（通常是三角形），水平放置在细节的左侧填充中要素该小部件应允许用户请求显示或隐藏细节。

Answer 1

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

• 来源：http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&精度=秒
• 有关披露小部件推荐的详细信息：
  http://mail-archive.com/[e-mail]/msg26129.html

代码

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

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

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

Answer 3

2021年再次推出的::-webkit-details-marker仅适用于Safari。对于所有其他的bmodern浏览器，您需要将伪元素::marker作为目标，如下所示：

details > summary {
  list-style: none;
}
details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

Codepen

Answer 4

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

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

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

Answer 5

我发现这已经足够好了。

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

Answer 6

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

details > summary {display:block}

Answer 7

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

Answer 8

将显示更改为"block"将删除箭头。

summary {
    display:block;
}

Answer 9

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

：）

我的答案：只需运行devtools并为属性显示和/或列表样式类型、列表样式设置自定义值。

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>

Answer 10

这个解决方案对我有效，因为上的最高评级对我来说在Chrome上不起作用。它是原始解决方案的变体。

details summary {
list-style: none;

}

Answer 11

React/NextJs中的一个很好的解决方案类似于：

details summary::marker {
  content: '';
}