Summary箭头与内容未居中及Chrome替换箭头图标问题求助

1. 彻底移除默认箭头 #

你之前的代码未生效，是因为现代浏览器对summary默认标记的伪类处理存在差异，需要同时覆盖多类选择器：

/* 移除Chrome/Safari的默认箭头 */
summary::-webkit-details-marker {
  display: none;
}
/* 移除现代标准浏览器的默认箭头 */
summary::marker {
  display: none;
}
/* 兼容旧版Firefox */
summary {
  list-style: none;
}

2. 添加自定义PNG图标并切换展开状态 #

通过伪元素::before添加自定义图标，利用details[open]选择器切换展开/收起状态的图标：

summary {
  /* 让图标与内容可对齐布局 */
  display: flex;
  align-items: center;
  gap: 0.5em; /* 图标与表格的间距 */
  cursor: pointer; /* 提示可点击 */
}

/* 默认收起状态的图标 */
summary::before {
  content: '';
  width: 16px; /* 图标宽度 */
  height: 16px; /* 图标高度 */
  background-image: url('collapsed-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 展开状态的图标 */
details[open] summary::before {
  background-image: url('expanded-icon.png');
  /* 若使用同一图标，可替换为旋转效果：transform: rotate(90deg); */
}

3. 解决内容与图标居中对齐 #

将summary设为flex布局，配合对齐属性，同时调整表格布局确保整体居中：

.eventscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1em;
  padding: 1em;
  gap: 1em;
}

details {
  justify-self: center;
  width: 100%; /* 让details占满容器宽度，方便表格居中 */
}

details table {
  width: 70%;
  margin: 0 auto; /* 表格水平居中 */
  table-layout: auto;
}

details td {
  border-right: 1px solid;
  text-align: center;
}

summary {
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center; /* 让图标+表格整体水平居中 */
  gap: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #733030;
  margin-bottom: 0.5em;
}

完整代码示例 #

CSS

/* 全局移除默认箭头 */
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  display: none;
}
summary {
  list-style: none;
}

.eventscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1em;
  padding: 1em;
  gap: 1em;
}

details {
  justify-self: center;
  width: 100%;
}

details table {
  width: 70%;
  margin: 0 auto;
  table-layout: auto;
}

details td {
  border-right: 1px solid;
  text-align: center;
}

summary {
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
}

/* 自定义图标 */
summary::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url('collapsed-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
}

details[open] summary::before {
  background-image: url('expanded-icon.png');
  /* 可选：用旋转替代图标切换 transform: rotate(90deg); */
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #733030;
  margin-bottom: 0.5em;
}

HTML

<div class="eventscreen">
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
</div>

关键说明 #

• 移除默认箭头需覆盖三类选择器，确保全主流浏览器生效。
• flex布局的align-items: center实现图标与表格垂直居中，justify-content: center实现整体水平居中。
• 自定义图标可通过切换图片或旋转同一图标的方式实现状态变化，按需选择即可。

内容的提问来源于stack exchange，提问作者Ido Traini