如何隐藏默认情况下显示在Chrome中HTML 5<Details>元素上的箭头?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (315)
<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的Details元素上的箭头吗?

这有点像默认的<input type="search" />在Webkit中,你可以改变它,但并不是很明显。

编辑

尝试了以下CSS代码,但没有成功:

details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}

我们可能需要用一些奇怪的伪选择器来瞄准它details::-webkit-details-disclosure-widget或者说目前根本没有办法改变一切。

第一个容器应该包含至少一个行框,而该行框应该包含一个公开小部件(通常是一个三角形),该小部件水平地放置在细节元素的左侧填充中。该小部件将允许用户请求显示或隐藏详细信息。

提问于
用户回答回答于

代码

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

请注意,如果不提供摘要元素,则还将显示公开小部件,规范允许这样做。

用户回答回答于

考虑到我的当前计算机不会运行Chrome,并且无法访问我通常使用的计算机,我不确定这是否有效,但是请尝试将其添加到您的CSS文件中:

details > summary:first-of-type {
    list-style-type: none;
}

请告诉我它是否有效,我只在推荐信中看到它,而不是官方的规范。

所属标签

可能回答问题的人

  • 不吃貓的鱼oo

    5 粉丝466 提问6 回答
  • Richel

    8 粉丝0 提问4 回答
  • 发条丶魔灵1

    6 粉丝525 提问3 回答
  • 人生的旅途

    10 粉丝484 提问3 回答

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励