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

How can you hide the arrow that is displayed by default on the HTML5 <details> element in Chrome?

提问by DADU

I now its still early but I also know you guys are on top of it.

我现在还早，但我也知道你们在上面。

I want to use the HTML5 details element:

我想使用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>

As of this writing, Chrome 12 beta is the only browser to actually give the details element functionality (clicking on summary toggles the details content). So to answer the following question you'll probably want to use that browser.

在撰写本文时，Chrome 12 beta 是唯一真正提供详细信息元素功能的浏览器（单击摘要可切换详细信息内容）。因此，要回答以下问题，您可能需要使用该浏览器。

Do you know how you can hide the arrow that is displayed by default on a details element in Chrome?

您知道如何隐藏 Chrome 中详细信息元素上默认显示的箭头吗？

It's a bit like the default styling of <input type="search" />in Webkit (see http://css-tricks.com/webkit-html5-search-inputs/). You can change it but it's not that obvious.

它有点像<input type="search" />Webkit 中的默认样式（参见http://css-tricks.com/webkit-html5-search-inputs/）。你可以改变它，但它不是那么明显。

EDIT

编辑

Tried the following CSS code with no success:

尝试了以下 CSS 代码但没有成功：

details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}

There probably is a chance we will need to target it with some weird pseudo selector like details::-webkit-details-disclosure-widgetor there's currently no way to change things at all.

可能有可能我们需要用一些奇怪的伪选择器来定位它，details::-webkit-details-disclosure-widget或者目前根本没有办法改变它。

Furthermore I found this in the specification:

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

The first container is expected to contain at least one line box, and that line box is expected to contain a disclosure widget (typically a triangle), horizontally positioned within the left padding of the details element. That widget is expected to allow the user to request that the details be shown or hidden.

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

回答by DADU

I didn't plan to answer my own question but I have the solution.

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

• Source: http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
• More about the recommendation for the disclosure widget:
  http://mail-archive.com/[email protected]/msg26129.html

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

Code

代码

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

Note that the disclosure widget will still be displayed if you don't provide a summary element, which is allowed by the spec.

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

回答by Will Kunkel

I'm not sure if this will work, given that my current computer will not run Chrome and I do not have access to the computer I normally use, but try adding this to your css file:

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

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

Do tell me if it works, I only saw it in a recommendation, not an official spec.

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

回答by Crystal

I find this works well enough.

我发现这很好用。

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

::-webkit-details-marker { 显示：无；}

回答by thmsnhl

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

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

You can achieve this with:

您可以通过以下方式实现：

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

回答by Taufik Nurrohman

I am on Firefox 65.0.1 and can remove the arrow this way:

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

details > summary {display:block}

回答by user2121943

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

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

?

?