如何解决如何隐藏Chrome中HTML5 <details>元素上默认显示的箭头?
| 我现在还很早,但我也知道你们在上面。 我想使用HTML5 details元素:<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是唯一实际提供details元素功能的浏览器(单击摘要可切换细节内容)。因此,要回答以下问题,您可能要使用该浏览器。
您知道如何隐藏默认情况下在Chrome的details元素上显示的箭头吗?
有点像Webkit中的默认样式ѭ1(请参阅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
)来定位它,或者根本无法改变任何东西。
此外,我在规范中发现了这一点:
预计第一个容器
至少包含一个线框,以及
该行框应包含一个
披露小部件(通常是
三角形),水平放置
在细节的左侧填充内
元件。该小部件有望
允许用户请求
显示或隐藏详细信息。
解决方法
我不打算回答自己的问题,但我有解决方案。
资源:
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;
}
请注意,如果您未提供规范允许的摘要元素,则仍会显示披露小部件。
, 鉴于我当前的计算机无法运行Chrome,并且我无权访问我通常使用的计算机,因此我不确定这是否会起作用,但是请尝试将其添加到您的css文件中:
details > summary:first-of-type {
list-style-type: none;
}
请告诉我它是否有效,我只是在推荐中看到它,而不是官方规格。
, 我觉得这很好用。
::-webkit-details-marker {display:none; }
, 根据https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget
您可以使用以下方法实现此目的:
details > summary {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
, 我使用的是Firefox 65.0.1,可以通过以下方式删除箭头:
details > summary {display:block}
, 摘要::-webkit-details-marker {
font-size:0px
}
✔
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。