如何隐藏默认情况下在HTML5上显示的箭头< details>元素在Chrome？ [英] How can you hide the arrow that is displayed by default on the HTML5 <details> element in Chrome?
问题描述
我现在仍然很早，但我也知道你们都在它的顶部。
我想使用 HTML5详情元素：
< details>
< summary>什么是HTML5详细信息元素？< / summary>
< p>细节元素表示用户可从其获得附加信息或控件的公开小部件。< / p>
< / details>
在撰写本文时，Chrome 12测试版是唯一实际提供详细元素功能的浏览器on摘要切换细节内容）。因此，为了回答以下问题，您可能需要使用该浏览器。
您知道如何隐藏默认情况下显示的箭头
这有点类似于< input type =search/>
尝试了下面的CSS代码没有成功：
细节，
详细信息摘要{
padding-left：0;
background-image：none;
-webkit-appearance：none;
}
有可能我们需要使用一些奇怪的伪选择器像 details :: - webkit-details-disclosure-widget 或者目前没有办法改变任何东西。
此外，我在规范中找到了这一点：
第一个容器预期为
包含至少一个行框，
该行框应包含
公开小部件（通常是
三角形），水平放置
在细节
元素的左侧填充内。该窗口小部件预计
允许用户请求显示或隐藏
详细信息。
我没有计划回答我自己的问题，但我有解决方案。
- b $ b http://trac.webkit.org/timeline ？from = 2011-04-15T16％3A33％3A41-0700& precision = second
- 更多关于披露窗口小部件的建议：
< a href =http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html> http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html a>
详情
summary :: - webkit-details-marker {
display：none; }
请注意，如果您未提供规范允许的摘要元素，则仍会显示公开小部件。
I now its still early but I also know you guys are on top of it.
I want to use the HTML5 details element:
<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.
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 <input type="search" /> in Webkit (see http://css-tricks.com/webkit-html5-search-inputs/). You can change it but it's not that obvious.
EDIT
Tried the following CSS code with no success:
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-widget or there's currently no way to change things at all.
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.
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/whatwg@lists.whatwg.org/msg26129.html
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.
这篇关于如何隐藏默认情况下在HTML5上显示的箭头< details>元素在Chrome？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
