替换HTML5详细信息标记的展开（▶）图标 [英] Replace the expand ( ▶) icon of HTML5 details tag

问题描述

我使用我的网站中的< details> 标记，我想更改展开/折叠箭头的设计。
是否可以设置图片而不是现有字符？
是否可以更改箭头的位置？

I use the <details> tag in my website and I want to change the design of the expand/collapse arrows. Is it possible to set a picture instead of the existing characters? Is it possible to change the position of the arrows? I want it to be on the right side and not next to the summary text.

推荐答案

HTML5Doctor文章有一个样式示例：

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

演示

这使得箭头巨大，白色在红色背景上。用图像替换标记更难。您必须完全删除标记，然后使用之前或之后的伪类：

This makes the arrow huge, white on red background. Replacing the marker by an image is harder. You have to remove the marker altogether and use the before or after pseudo-classes instead:

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

summary:after {
  background: url(some-picture);
  float: left; 
  height: 20px;
  width: 20px;
  content: " ";
}

details[open] summary:after {
  background: url(other-picture);
}

这篇关于替换HTML5详细信息标记的展开（▶）图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！