css – 替换HTML5详细信息标签的展开(▶)图标

我使用< details>标签在我的网站,我想改变扩展/折叠箭头的设计.
是否可以设置图片而不是现有的字符？
是否可以改变箭头的位置？我想要它在右边,而不是在摘要文本旁边.

解决方法

HTML5Doctor article有一个造型的例子：

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

Demo

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

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);
}

原文地址：https://www.jb51.cc/css/217111.html