Как изменить стандартный заголовок <details>

Как изменить стандартный заголовок <details>

При использовании элемента <details>, который создаёт разворащивающийся / сворачивающийся по клику блок с некоторым контентом, браузеры по умолчанию добавляют в качестве заголовка такого спойлера, чтобы как-то обозначить его, свой текст; что-то типа Подробнее. Однако текст можно задать и свой, с помощью вспомогательного элемента <summary>:

<details>
	<summary>Заголовок</summary>
	Некоторый контент
</details>

Поддержку <details> браузерами смотрите на CanIUse.Com: здесь.

Пример

Элементы <details> можно вкладывать друг в друга, создавая тем самым спойлер в спойлере.

Дополнительное оформление

Скрыть стрелку, которую по умолчанию браузер добавляет перед текстом заголовка, можно обернув текст <summary> в <span> с соответствующим фоном и сдвинув его влево:

<style>
	summary > span {
		background-color: #fff;
		margin-left: -1.1em;
	}
</style>

<details>
	<summary><span>Скрытый текст</span></summary>
	Контент под заголовком «Скрытый текст»
</details>

Чтобы изменить вид курсора при наведении на заголовок (по умолчанию он установлен как text) и убрать рамку, добавляемую браузером при клике по нему, можно сделать так:

summary {
	cursor: pointer;
	outline: 0;
}