blocks|key|3176362|text|我不确定这是否有效，因为我现在的电脑不能运行Chrome，而且我也不能访问我通常使用的电脑，但是试着把这个添加到你的css文件中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3176363|details+>+summary:first-of-type+{
++++list-style-type:+none;
}|code-block|syntax|javascript|3176364|一定要告诉我它是否有效，我只是在推荐中看到了它，而不是官方规范。|3176365|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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:

<pre><code>details &gt; summary:first-of-type {
 list-style-type: none;
}
</code></pre>

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

blocks|key|266766|text|我不打算回答我自己的问题，但我有解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|266767|关于公开小部件的推荐：http://trac.webkit.org/timeline?from=2011-04-15T16%253A33%253A41-0700&precision=second|offset|length|266768|More+|unordered-list-item|266769|来源：|266770|266771|266772|http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html|266773|代码|266774|details+summary::-webkit-details-marker+{
++display:none;
}|code-block|syntax|javascript|266775|请注意，如果您不提供规范允许的摘要元素，则仍然会显示披露小部件。|266776|entityMap|0|LINK|mutability|MUTABLE|url|http://trac.webkit.org/timeline?from=2011-04-15T16%253A33%253A41-0700&precision=second|1^0|0|B|2A|0|0|0|0|0|0|0|1P|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|F|3|G|5|H|7|1B|8|@]|9|@]|A|$]]|$1|I|3|J|5|H|7|1C|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|O|3|P|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1K|8|@]|9|@]|A|$T|U]]|$1|V|3|W|5|6|7|1L|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]|15|$5|10|11|12|A|$13|N]]]]

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

<ul>
<li>Source:
<a href="http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&amp;precision=second" rel="noreferrer">http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&amp;precision=second</a></li>
<li>More about the recommendation for the disclosure widget: 
<a href="http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html" rel="noreferrer">http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html</a></li>
</ul>

Code 

<pre><code>details summary::-webkit-details-marker {
 display:none;
}
</code></pre>

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

blocks|key|2962731|text|summary::-webkit-details-marker+{
++font-size:0px
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2962732|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-css prettyprint-override"><code>summary::-webkit-details-marker {
 font-size:0px
}
</code></pre>

blocks|key|3176399|text|我发现这已经足够好了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3176400|::-webkit-details-marker+{
++display:none;
}|code-block|syntax|javascript|3176401|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I find this works well enough.
<pre class="lang-css prettyprint-override"><code>::-webkit-details-marker {
 display:none;
}
</code></pre>

blocks|key|264541|text|我使用的是Firefox+65.0.1，可以这样删除箭头：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|264542|details+>+summary+{display:block}|code-block|syntax|javascript|264543|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>details &gt; summary {display:block}
</code></pre>

blocks|key|266800|text|根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget的说法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|266801|您可以通过以下方式实现这一点：|266802|details+>+summary+{
++list-style:+none;
}
details+>+summary::-webkit-details-marker+{
++display:+none;
}|code-block|syntax|javascript|266803|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget^0|2|2R|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

According to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget</a> 

You can achieve this with: 

<pre class="lang-css prettyprint-override"><code>details &gt; summary {
 list-style: none;
}
details &gt; summary::-webkit-details-marker {
 display: none;
}

</code></pre>

blocks|key|2962767|text|到了2021年，::-webkit-details-marker不再起作用。您需要将伪元素::marker作为目标，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2962768|details+>+summary+{
++list-style:+none;
}
details+>+summary::marker+{
++display:+none;
}|code-block|syntax|javascript|2962769|entityMap^0|8|O|19|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Revisiting in 2021, the <code>::-webkit-details-marker</code> no longer works. You need to target the pseudo-element <code>::marker</code> like so:
<pre class="lang-css prettyprint-override"><code>details &gt; summary {
 list-style: none;
}
details &gt; summary::marker {
 display: none;
}
</code></pre>

blocks|key|3176468|text|我在我的示例中看到，这只是一个将一个显示从just+item重写到其他的问题。因此，现在我们使用该类型的方式与使用flex、grid等c的方式相同-所有这些都有它们的引用属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3176469|:)|3176470|我的答案是：只需运行devtools并为属性显示和/或列表样式类型、列表样式设置自定义值。|3176471|​|3176472|details{
background:yellow;
border-radius:+4px;
cursor:pointer;
}

summary{
/*+ANSWER+BELOW*/
++++list-style:+none;
/*+ANSWER+ABOVE*/
++++background:green;
++++border:1px+solid+red;
}|code-block|syntax|javascript|3176473|<details>detail
<summary>summary</summary
</details>|3176474|3176475|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

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.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>details{
background:yellow;
border-radius: 4px;
cursor:pointer;
}

summary{
/* ANSWER BELOW*/
 list-style: none;
/* ANSWER ABOVE*/
 background:green;
 border:1px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;details&gt;detail
&lt;summary&gt;summary&lt;/summary
&lt;/details&gt;</code></pre>
</div>
</div>

blocks|key|3176477|text|将显示更改为“block”将删除箭头。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3176478|summary+{
++++display:block;
}|code-block|syntax|javascript|3176479|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Changing the display to 'block' will remove the arrow.
<pre><code>summary {
 display:block;
}
</code></pre>

I now its still early but I also know you guys are on top of it.
I want to use the <a href="http://www.w3.org/TR/html5/interactive-elements.html#the-details-element" rel="nofollow noreferrer">HTML5 details element</a>:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;details&gt;
 &lt;summary&gt;What's the HTML5 details element?&lt;/summary&gt;
 &lt;p&gt;The details element represents a disclosure widget from which the user can obtain additional information or controls.&lt;/p&gt;
&lt;/details&gt;</code></pre>
</div>
</div>

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.
Do you know how you can hide the arrow that is displayed by default on a details element in Chrome?
It's a bit like the default styling of <code>&lt;input type=&quot;search&quot; /&gt;</code> in Webkit (see <a href="http://css-tricks.com/webkit-html5-search-inputs/" rel="nofollow noreferrer">http://css-tricks.com/webkit-html5-search-inputs/</a>). You can change it but it's not that obvious.
EDIT
Tried the following CSS code with no success:
<pre><code>details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}
</code></pre>
There probably is a chance we will need to target it with some weird pseudo selector like <code>details::-webkit-details-disclosure-widget</code> or there's currently no way to change things at all.
Furthermore I found this in <a href="http://dev.w3.org/html5/spec/Overview.html#the-details-element-0" rel="nofollow noreferrer">the specification</a>:
<blockquote>
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.
</blockquote>

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

容器

HTML5

我现在还为时过早，但我也知道你们正在处理这件事。我想用​<details> <summary>What's the HTML5 details element?</summary> The details element represents a disclosure widget from whic...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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