Стилизация элемента details

Последнее обновление: 14.07.2021

Рассмотрим некоторые возможности по стилизации элемента details, который представляет раскрываемый блок.

Атрибут open

Прежде всего в раскрытом состоянии к элементу details добавляется атрибут open. Соответственно, используя атрибут, можно задать разные стили для элемента в скрытом и раскрытом состоянии. Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
	<style>
	details > summary {
		padding: 5px;
		background-color: #eee;
		color: #333;
		border: 1px #ccc solid;
		cursor: pointer;
	}

	details > div {
		border: 1px #ccc solid;
		padding: 10px;
	}
	details[open] > summary {
		color:#eee; 
		background-color:#333;
	}
</style>
</head>
<body>
<details>
	<summary>Князь Андрей и Пьер в Богучарово</summary>
	<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом 
	стояли две пожарные трубы и бочка, выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. 
	На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>

С помощью селектора details[open] мы можем обратиться к элементу details в раскрытом состоянии. Соответственно селектор

details[open] > summary {
	color:#eee; 
	background-color:#333;
}

Позволяет задать стили для элемента summary в раскрытом состоянии. То есть в данном случае при раскрытии элемента details мы переключаем цвет стиля и фона заголовка.

Details и summary в HTML и CSS, атрибут open

Настройка маркера

По умолчанию элемент summary в качестве маркера скрытости/раскрытости использует символ треугольника. Но его также можно настроить.

Для настройки изображения маркера можно использовать свойство list-style, а также дополнительные свойства типа list-style-type или list-style-image, которые применяются для стилизации списков. Например, если необходимо убрать этот маркер, то можно применить стиль list-style: none:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
	<style>

	details > summary {
		padding: 5px;
		background-color: #eee;
		color: #333;
		border: 1px #ccc solid;
		cursor: pointer;
		list-style: none;
	}

	details > div {
		border: 1px #ccc solid;
		padding: 10px;
	}

details[open] > summary {
	color:#eee; 
   background-color:#333;
}
</style>
</head>
<body>
<details>
	<summary>Князь Андрей и Пьер в Богучарово</summary>
	<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, 
	выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>
Details и summary в HTML и CSS, настройка маркера и list-style

Другой пример - примение стиля list-style-type: disc;:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
	<style>

	details > summary {
		padding: 5px;
		background-color: #eee;
		color: #333;
		border: 1px #ccc solid;
		cursor: pointer;
		
		list-style-type: disc;	/* задаем маркер*/
	}

	details > div {
		border: 1px #ccc solid;
		padding: 10px;
	}

details[open] > summary {
	color:#eee; 
   background-color:#333;
}
</style>
</head>
<body>
<details>
	<summary>Князь Андрей и Пьер в Богучарово</summary>
	<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, 
	выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>
Details и summary в HTML и CSS, настройка маркера и list-style-type

Настройка с помощью свойства content

Но естественно свойством list-style мы не ограничены и по своему усмотрению можем более тонко управлять заголовком, например, с помощью свойства content:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
	<style>

	details > summary {
		padding: 5px;
		background-color: #eee;
		color: #333;
		border: 1px #ccc solid;
		cursor: pointer;
		list-style: none;
	}

	details > div {
		border: 1px #ccc solid;
		padding: 10px;
	}

details[open] > summary {
	color:#eee; 
   background-color:#333;
}
summary:before {
   content: "+";
   font-size: 20px;
   font-weight: bold;
   margin: -5px 5px 0 0;
}

details[open] summary:before {
   content: "-";
}
</style>
</head>
<body>
<details>
	<summary>Князь Андрей и Пьер в Богучарово</summary>
	<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, 
	выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>

В данном случае с помощью селектора summary:before устанавливаем содержимое, которое будет располагаться перед основным содержимым элемента summary. Селектор details[open] summary:before позволяет сделать то же самое, только в раскрытом виде. В итоге в скрытом виде маркер будет отображать символ +, а в раскрытом - символ -.

Details и настройка маркера summary в HTML и CSS

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850