css – 如何隐藏默认情况下在Chrome中的HTML5元素上显示的箭头?

前端之家收集整理的这篇文章主要介绍了css – 如何隐藏默认情况下在Chrome中的HTML5元素上显示的箭头?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我现在仍然很早,但我也知道你们都在它的顶部。

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

在撰写本文时,Chrome 12测试版是唯一实际提供详细信息元素功能的浏览器(点击摘要切换详细信息内容)。所以要回答以下问题,你可能想使用该浏览器。

您知道如何隐藏默认情况下在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或目前没有办法改变的东西。

此外,我发现这在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.

解决方法

我没有计划回答我自己的问题,但我有解决方案。

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

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

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

猜你在找的CSS相关文章