如何解决HTML中details元素的默认三角图标问题

要实现仅显示Material Icons的info图标、隐藏summary默认三角图标的需求，只需通过CSS覆盖浏览器默认样式即可，同时完全保留details元素的展开/收起交互功能。

解决方案代码 #

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
  /* 隐藏所有浏览器下的默认三角标记 */
  summary {
    list-style: none;
    cursor: pointer; /* 可选：添加手型光标提升交互提示 */
  }
  /* 针对WebKit内核浏览器（Chrome、Safari等）的额外处理 */
  summary::-webkit-details-marker {
    display: none;
  }
</style>

<main>
  <details>
    <summary><span class="material-icons">info</span></summary>
    <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
  </details>
</main>

说明 #

• list-style: none 是通用的隐藏列表标记方式，可覆盖多数现代浏览器的默认样式
• ::-webkit-details-marker 专门针对WebKit内核浏览器，确保彻底移除默认三角图标
• 可选添加 cursor: pointer 能让用户更清晰地感知该图标为可点击交互元素

内容的提问来源于stack exchange，提问作者Atman Atos