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

我现在还早，但我也知道你们是在它的顶部。

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

在撰写本文时，Chrome12beta 是唯一一个真正提供细节元素功能的浏览器(点击摘要可以切换细节内容)。所以为了回答下面的问题，你可能需要使用这个浏览器。

你知道如何在 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)来定位它，或者目前根本没有办法进行更改。

此外，我还在 说明书中发现了这一点:

预计第一个容器将 至少包含一个行框，并且 该行框应该包含一个 披露小部件(通常是一个 三角形) ，水平定位 在左边填充的细节 元素。该小部件应该 允许用户请求 显示或隐藏细节。

71690 次浏览
小开

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:

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.

小开
最佳答案

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

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.

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

I find this works well enough.

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

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

details > summary {display:block}
小开

According to 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;
}
小开

Revisiting in 2021, the ::-webkit-details-marker n̶o̶ ̶l̶o̶n̶g̶e̶r̶ works only for Safari. For all other bmodern browsers, you need to target the pseudo-element ::marker like so:

details > summary {
list-style: none;
}


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

Codepen

小开

I see in my example that it's just a matter of overwriting a display fromlist-item to other. Hence nowadays we use that type the same way as we use flex, grid et c. - all these've got their referral attributes.

:)

My answer: Just run devtools and set custom value for attributes display and/or 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>

小开

Changing the display to 'block' will remove the arrow.

summary {
display:block;
}
小开

This solution worked for me, since the highest rated on did not work on Chrome for me. It's a variation of the original solution.

details summary {
list-style: none;

}


提交答案