Разное

Details html стилизация: CSS3 | Стилизация элемента details

14.05.2023

Содержание

CSS3 | Стилизация элемента 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 мы переключаем цвет стиля и фона заголовка.

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

По умолчанию элемент 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>

Другой пример — примение стиля 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>
Настройка с помощью свойства 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 позволяет сделать то же самое, только в раскрытом виде. В итоге в скрытом виде маркер будет отображать символ +, а в раскрытом — символ -.

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

— HTML | MDN

HTML-элемент <details> используется для раскрытия скрытой (дополнительной) информации.

Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента <details> является <summary>, содержимое элемента

<summary> используется в качестве метки для виджета раскрытия.

Content categoriesFlow content, sectioning root, interactive content, palpable content.
Permitted contentOne <summary> element followed by flow content.
Tag omissionНет, открывающий и закрывающий теги обязательны.
Permitted parentsAny element that accepts flow content.
Permitted ARIA rolesNone
DOM interfaceHTMLDetailsElement (en-US)

Элемент поддерживает только глобальные атрибуты.

open

Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>
<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>

Result

**Примечание:**Если приведённый выше пример не работает, см. Browser compatibility , чтобы определить поддерживает ли вообще ваш браузер эту функцию.

Следуя более новой спецификации, Firefox отображает элемент summary как display: list-item и маркер можно стилизовать так же, как и элементы списка.

Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент ::-webkit-details-marker, с помощью которого можно стилизовать маркер.

Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу

summary {display: block;}, а для Chrome и Safari’s установить ::-webkit-details-marker {display: none;}. После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.

HTML

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

CSS

summary {
  display: block;
}
  summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}
details[open] > summary::before {
  content: '\25BC';
}

Result

SpecificationStatusComment
HTML Living Standard
Определение ‘<details>’ в этой спецификации.		Живой стандарт
HTML 5.1
Определение ‘<details>’ в этой спецификации.		РекомендацияInitial definition

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • <summary>

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Как стилизовать теги HTML Details и Summary

HTML DETAILS TAGS включены в относительно новую группу элементов HTML5. Тег сведений (или «элемент») можно использовать отдельно или в сочетании с новым сводным тегом . Эта HTML-комбинация называется виджетом раскрытия , но на самом деле действует как простая аккордеон, которую пользователь может открыть, если хочет просмотреть дополнительную информацию.

 
С помощью этого волшебного кода вы можете почти без усилий создать очаровательный маленький аккордеон!
 
Это немного напоминает мне первые дни моей карьеры веб-разработчика/дизайнера, когда я кодировал скрытые слои веб-страниц, используя DHTML (динамический HTML). Только этот новый способ НАМНОГО проще. И забудьте о необходимости бороться с JavaScript, чтобы попытаться создать тумблер типа аккордеона; в этом нет необходимости, если вы ищете быструю и простую функцию аккордеона.

 
Чтобы полностью заявить о проблеме блочных и встроенных HTML-элементов, которая на самом деле больше не определена и не прописана в последней версии HTML5. Это скорее унаследованная вещь HTML4, но мне все еще нравится держать все в голове, классифицируя теги таким образом.

 

Давайте начнем с определения того, как этот тег будет выглядеть без применения стилей.
Прежде всего, в браузере (в моем случае Chrome) это будет выглядеть так ( нажмите на стрелку ):
 

Эй, это так КРУТО! И это было легко создать.

 
Вот единственный код, необходимый для создания очень простого элементарного эффекта аккордеона/скрытого слоя:
<детали>
Эй, это так КРУТО! И это было легко создать.

 
На самом деле — если говорить о нажатии на маленькую стрелку для отображения скрытого текста — это также работает, если вы нажмете там текст «Подробности» или даже пробел справа от этого слова.
 

Далее мы добавим элемент сводки HTML (или тег), который обычно сопровождает элемент сведений:

Это текст внутри двух тегов «резюме».

Эй, это так КРУТО! И это было легко создать.

 
Обратите внимание, что текст после стрелки теперь не просто говорит «Подробности». Это потому, что мы указали, что там должен отображаться другой текст. Без добавления «резюме» в этом тексте по умолчанию будет написано «Подробности». Вот снова код с недавно добавленным элементом summary :
 


Это текст внутри двух тегов «summary».
Эй, это так КРУТО! И это было легко создать.

 

Изменение курсора мыши

 
По какой-то причине при наведении курсора мыши на маленькую стрелку (слева от деталей и/или сводных элементов) курсор выглядит как стрелка . Если вам не нравится, что курсор мыши выглядит как указывающая рука вместо , попробуйте добавить приведенный ниже код CSS на свою страницу в том месте (или нацелив элемент HTML), на котором вы хотите, чтобы этот эффект отображался.

Вот как этот небольшой добавленный фрагмент кода будет выглядеть в действии (наведите курсор на стрелку или область справа от него):

Курсор мыши должен превратиться в руку при наведении на эту область.

Эй, похоже, это сработало!

 
Это код CSS, используемый для создания этого эффекта:

подробности {
курсор: указатель;
}
 

Отображение внутреннего сводного текста в открытом состоянии

 
Еще один интересный вариант — отображать текст внутри двух тегов «p» (скрытая область) в открытом состоянии, чтобы он всегда был виден, пока вы его не скроете. Для этого вы должны вставить атрибут «open» после «details» следующим образом:
 


Это заголовок следующего текста:

Здравствуйте! Я текст, который только что упоминался выше в резюме.


 
Вот вывод браузера:

Это заголовок для следующего текста:

Привет! Я текст, который только что упоминался выше в резюме.

 
Вы по-прежнему сможете щелкнуть маленькую стрелку, чтобы закрыть текст сводки.
 

Стилизация текста

 

Если вы хотите приукрасить текст внутри скрытого слоя, можно заключить его в два тега

.

Теперь вы можете добавить стилей CSS непосредственно в тег

. В вашем CSS обязательно вложите элемент «p» внутрь элемента «details» ; Таким образом, выбранный вами конкретный стиль применяется только к элементам «p», если они являются дочерними элементами (или внутри) родительского элемента «details». В противном случае ваши стили могут быть применены ко всей веб-странице, затрагивая что-либо внутри абзаца. И если вы работаете над своим сайтом в WordPress, помните, что WordPress имеет тенденцию автоматически добавлять теги «p» к строкам и абзацам, даже если вы на самом деле не настроили свой html-код таким образом. Он добавляет кучу тегов «p», когда вы публикуете свою страницу, нравится вам это или нет. (грубо… ха-ха)
 
В любом случае… результирующий HTML-код может выглядеть следующим образом:
 


Это какой-то другой текст внутри двух тегов "summary".

Эй, посмотри на меня теперь - я такой модный!


 
И вот как этот код будет выглядеть в браузере (щелкните стрелку):

Это какой-то другой текст внутри 2 » резюме».

Эй, посмотри на меня сейчас — я такой модный!

 

Это код CSS, используемый для создания этого эффекта:

details p {
color: Purple;
семейство шрифтов: "Times New Roman", с засечками;
размер шрифта: 20px;
}
 

Выделение текста резюме жирным шрифтом

 

Это заголовок следующего текста:

Я — текст в резюме, выделенный жирным шрифтом для акцента.

 
Внутренний текст внутри этих сводных тегов выделен полужирным путем обтекания его «строгими» HTML-тегами следующим образом:
 


Это заголовок следующего текста:

Я — текст в резюме, выделенный жирным шрифтом для акцента.


 

Вы также можете использовать элемент html span , чтобы вложить текст внутрь, если хотите. Затем вы можете либо стилизовать сам элемент span, либо (для еще большего контроля) вы можете добавить класс CSS или идентификатор в span 9.0004 элемент. В приведенном ниже примере используется идентификатор для стилизации сводного текста внутри двух тегов span:
 

Нажмите на меня, чтобы посмотреть, как выглядит мой текст!

Я представляю текст внутри двух тегов span с идентификатором.

 
Вот html для приведенной выше крошечной аккордеонной штуковины:


Нажмите на меня, чтобы посмотреть, как выглядит мой текст!:
Я текст внутри из 2 тегов "span" с использованием идентификатора.

 
А вот небольшой код CSS, используемый для создания этих стилей:

#fancyText {
color:teal;
семейство шрифтов: "Calibri", без засечек;
размер шрифта: 26px;
}
 

Добавление цвета позади текста

 

Это заголовок для текста внутри моей скрытой области (нажмите на меня)…

Я текст с другим цветом фона.

 
HTML-код для приведенного выше выглядит следующим образом:
 


Это заголовок для текста внутри моей скрытой области (нажмите на меня)...
Я некоторый текст с фоном другого цвета.

 
А вот небольшой код CSS, используемый для создания этих стилей:

#backgroundColor1 {
background-color: pink;
семейство шрифтов: "Garamond", с засечками;
размер шрифта: 24 пикселя;
цвет: черный;
}

 
Вы также можете добавить всплеск цвета позади видимого текста заголовка. В приведенном ниже примере используется идентификатор для стилизации самого элемента details :
 

Вот текст с фоновым цветом.

Разве этот цвет не выделяет белый текст выше?

 
Обратите внимание, как фоновый синий цвет распространяется по всей области и не заканчивается после последней буквы. Еще одна интересная вещь заключается в том, как крошечная стрелка была изменена с черной на белую вместе с цветом текста.

Вот html для приведенного выше:


Вот текст с фоновым цветом.
Разве этот цвет не выделяет белый текст выше?

 
А вот код CSS, используемый для создания этих стилей:

backgroundColor2 {
background-color: #2A87FF;
семейство шрифтов: "Verdana", без засечек;
размер шрифта: 18 пикселей;
цвет: белый;
отступ: 5px;
}

 
В этом примере для удобства добавлено небольшое количество отступов.

И последнее, на что я хотел бы обратить внимание, это то, как наш недавно добавленный цвет фона применяется ко ВСЕЙ области (а не только к верхней области заголовка). Это потому, что все это заключено в теги 2

.

 
На этом пока все, но прежде чем идти, ознакомьтесь с нашей следующей статьей о как применить более сложные стили к HTML-тегам DETAILS и/или SUMMARY . И если вы любите играть с языком кодирования HTML так же сильно, как и мы, вы можете прочитать нашу статью Креативных способов стилизации тега HTML HR .
 

 
Пожалуйста, поделитесь этой статьей, если она вам понравилась, и дайте нам знать в комментариях, если вы хотите узнать больше об этих (или любых других) тегах html. Спасибо за чтение!
 
 

Теги: как стилизовать тег сведений?html элемент сведенийhtml тег сведений стильhtml сводной тег стилистиль элементов сведений и сводки

38 HTML и с CSS

Коллекция бесплатных примеров кода HTML

& с CSS (с небольшим количеством JS). Обновление коллекции июля 2020 года. 8 новых предметов.

  1. Аккордеоны CSS
  2. Аккордеоны Bootstrap
  3. Аккордеоны jQuery
  4. Аккордеоны React
  5. Аккордеоны с попутным ветром
О коде

Последние транзакции

Концептуальный компонент, отображающий ваши последние денежные операции.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация аккордеонов с помощью WAAPI

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

и с анимированной стрелкой (без JS)

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Детали Модал

При вложении модального окна внутрь элемента details оно автоматически отображается при открытии подробностей. И вложив оверлей в summary , мы можем использовать его, чтобы вызвать закрытие.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Собственный элемент сведений HTML, стилизованный с помощью CSS

Rebound выстрел из Dribbble для реализации элемента, похожего на аккордеон, с использованием только HTML-элемента Details/Summary и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Взаимодействие деталей на чистом CSS

Использование HTML

для включения переключателя меню SVG.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Детали и сводка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Элемент Details для текста справки

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Подробная информация/Сводка TreeView

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: ionicons.css

О коде

Выпадающее меню на чистом CSS

Раскрывающееся меню Pure CSS с деталями и сводкой .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Только HTML Аккордеон

Изучение стилей тегов HTML details и summary для создания функционального аккордеона без использования JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Детали Элемент

A details HTML-элемент с пользовательской стрелкой в ​​формате SVG, без JavaScript.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Анимация

Детали Элемент

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Панель результатов модульного тестирования

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome.css

О коде

Детали Элементы Пример

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Детали HTML5 и сводка

подробности работает как аккордеон, но без скрипта, поддерживается большинством основных браузеров (кроме IE и Edge).

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Детали/Резюме Анимированный Аккордеон

Вы можете использовать это без JS, и оно работает нормально, за исключением анимации закрытия.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js, font-awesome.js

О коде

HTML

<детали> и <сводка>

HTML <детали> и <резюме> : шутки плохих детей.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: jquery.js, jquery.color.js

О коде

HTML5

Сведения и Сводка Дерево файлов

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: bootstrap.css

О коде

Детали и сводка

Поэкспериментируйте с подробными и сводными тегами HTML.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: jquery.js

О коде

и : Выбор гостиничного номера

Щелкните один, и остальные закроются.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: jquery.js

О коде

Детали + сводка

и с чистым CSS. Не поддерживаются браузеры IE и Edge.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Оповещение о спойлере с

и

Использование

и для скрытия/отображения спойлеров.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Рецепт с

и

Использование

и для создания рецепта энчиладас.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Хранилище фрагментов кода

Репозиторий фрагментов кода с HTML

& .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: darcula.css, highlight.js, scss.js, list.js,

О коде

Детали и сводка

Часто задаваемые вопросы с тегами HTML details & summary .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: tailwind.css

О коде

Детали и сводка

Пример кода с подробностями HTML и сводными тегами .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Детали и сводка

HTML макет часто задаваемых вопросов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: font-awesome.css

О коде

Отзывчивая веб-страница, разделенный экран

Адаптивная веб-страница со стилем «Разделенный экран» с использованием только CSS. Сделано с помощью HTML

и <сводка> . Попробуйте на маленьком экране.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Детали HTML и сводка

Простой шаблон часто задаваемых вопросов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: bootstrap.css, font-awesome.css

О коде

<детали> и <резюме>

Простой пример с подробностями HTML и описанием .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

<детали> и <резюме>

Быстрый и грязный эскиз детали аккордеона.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Адреса списка сегментов

Еще один пример с подробностями HTML и сводными тегами .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Свойства цифровой монополии

Идея использования тегов деталей и сводки .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Подробное описание жизни

Подробное описание жизни с <детали> и <резюме> .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: bootstrap.css, font-awesome.css

О коде

Изящно-деградирующая

<подробности> Аккордеон

Элемент details обеспечивает очень простую и доступную реализацию аккордеона, одного из наиболее распространенных компонентов пользовательского интерфейса. Проблема в том, что функциональность по умолчанию совсем не гладкая. Здесь я попытался решить эту проблему с помощью хорошего класса ES6, который расширяет функциональность элемента, не нарушая доступности.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *