Замените значок расширения (▶) тега детали HTML5

Я использую тег <details> на своем веб-сайте, и я хочу изменить дизайн стрелок expand/collapse. Возможно ли установить изображение вместо существующих символов? Можно ли изменить положение стрелок? Я хочу, чтобы это было справа, а не рядом с итоговым текстом.

Ответы

Ответ 1

статья HTML5Doctor содержит пример стилизации:

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

Демо

Это делает стрелку огромной, белой на красном фоне. Замена маркера на изображение сложнее. Вам необходимо полностью удалить маркер и вместо этого использовать псевдоклассы before или after:

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

Ответ 2

Оригинальный ответ работает. Просто используйте:

details summary::-webkit-details-marker {
    background: url(/images/toggle-expand.png) center no-repeat;
    color: transparent;
}
details[open] summary::-webkit-details-marker {
    background: url(/images/toggle-collapse.png) center no-repeat;
    color: transparent;
}