84

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

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

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

它有点像<input type="search" />Webkit 中的默认样式（参见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或者目前根本没有办法改变它。

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

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

4

9 回答 9

112

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

代码

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

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

于 2011-06-01T14:23:22.177 回答
64

根据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;
}
于 2019-06-18T12:58:43.600 回答
22

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

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

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

于 2011-06-01T02:25:06.250 回答
20

::-webkit-details-markern̶o̶̶l̶o̶n̶g̶e̶r̶在 2021 年重新访问，仅适用于 Safari。对于所有其他 bmodern 浏览器，您需要像这样定位伪元素::marker：

details > summary {
  list-style: none;
}

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

密码笔

于 2021-03-26T09:29:54.577 回答
8

我觉得这很好用。

::-webkit-details-marker {
  display:none;
}
于 2015-07-29T15:45:10.357 回答
5 
summary::-webkit-details-marker {
  font-size:0px
}
于 2013-03-01T17:01:12.140 回答
5

我在 Firefox 65.0.1 上，可以这样删除箭头：

details > summary {display:block}
于 2019-02-26T03:26:25.730 回答
1

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

summary {
    display:block;
}
于 2022-01-03T17:29:05.390 回答
0

我在我的示例中看到，这只是将显示从列表项覆盖到其他项的问题。因此，现在我们使用该类型的方式与使用 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>

于 2021-09-14T23:53:22.970 回答