METANIT.COM

Css summary убрать маркер

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

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

Интерактивный пример

Атрибуты

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

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

Пример

details> summary>Some detailssummary> p>More info about the details.p> details> details open> summary>Even more detailssummary> 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 , а для Chrome и Safari’s установить ::-webkit-details-marker . После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.

HTML

details> summary>Some detailssummary> 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

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 30 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Css summary убрать маркер

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

Атрибут open

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

     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  
Князь Андрей и Пьер в Богучарово
 
Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.
 
   

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

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

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

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

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

     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  
Князь Андрей и Пьер в Богучарово
 
Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.
 
   

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

     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  
Князь Андрей и Пьер в Богучарово
 
Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.
 
   

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

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

     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  
Князь Андрей и Пьер в Богучарово
 
Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.
 
   

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

Источник

Знакомьтесь,

Я хочу рассказать о замечательном элементе и показать несколько примеров его использования, от простых до безумных.

Вам знаком паттерн верстки компонента, который может менять своё состояние с видимого на скрытый:

toggleButton.onclick = () => component.classList.toggle('open')

А теперь забудьте. Существует элемент, который может делать это из коробки. Знакомьтесь —

Базовое применение

Прежде всего давайте посмотрим как этот элемент работает:

Обратите внимание, что пример работает без каких либо дополнительных стилей или JavaScript. Вся функциональность встроена в сам браузер.

По умолчанию видимый текст зависит от настроек языка вашей системы, но его можно изменить добавив в элемент :

Чтобы изменить состояние элемента в html вам достаточно добавить атрибут open

А чтобы управлять состоянием средствами JavaScript предусмотрен специальный API:

const details = document.querySelector('details') details.open = true // Отобразить содержимое details.open = false // Скрыть содержимое

Пара слов о доступности

Элемент фокусируемый. То есть передвигаясь по странице с клавиатуры вы попадёте на этот элемент. А вот содержимое может попасть в фокус только если открыт, то есть фокус никогда не попадет на невидимые элементы внутри .

Как правило, программы чтения с экрана хорошо справляются со стандартным использованием и . Существуют некоторые вариации в объявлении в зависимости от программы и браузера. Подробнее.

Примеры использования

Далее я примерно повторю некоторые компоненты из документации bootstrap, но практически без JavaScript.

Изменяем маркер

Первое что вам может понадобится — изменить внешний вид маркера. Делается это очень просто:

summary::-webkit-details-marker < /* Любые стили */ >

Или вы можете скрыть стандартный маркер и реализовать собственный

/* Убираем стандартный маркер Chrome */ details summary::-webkit-details-marker < display: none >/* Убираем стандартный маркер Firefox */ details > summary < list-style: none; >/* Добавляем собственный маркер для закрытого состояния */ details summary:before < content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; >/* Добавляем собственный маркер для открытого состояния */ details[open] summary:before

Collapse Component

Здесь всё просто. Базовый функционал такой же. Нужно лишь немного изменить внешний вид:

Accordion Component

Повторим предыдущий пример, немного изменим внешний вид и получим аккордеон:

Но, как видите, один элемент не закрывается когда открывается другой. Чтобы добиться этого нам понадобится пара строк JavaScript. поддерживает событие toggle . Используя это, можно очень легко отслеживать открытие одного элемента и по этому событию закрывать остальные:

Popover Component

Эта реализация очень похожа на Collapse Component, с той разницей что содержимое имеет абсолютное позиционирование и перекрывает контент.

Dropdown Component

В своей основе это тот же Popover Component. Отличается лишь внешний вид.

Тот же пример, только с отдельной кнопкой

Но у Dropdown Component есть ещё одно важное отличие: по клику за его пределами он должен скрываться. Чтобы реализовать это снова понадобится написать пару строк JavaScript.

// По клику на тело документа document.body.onclick = () => < // Найти все открытые document.body.querySelectorAll('details.dropdown[open]') // И закрыть каждый из них .forEach(e => e.open = false) >

Modal Component

И напоследок пример модального окна.

Вообще не лучший выбор для реализации этого компонента. Существует куда более подходящий элемент — , но у него весьма плохая поддержка браузерами.

Ссылки

UPD.
Решил добавить ещё один пример использования — многоуровневая навигация. Ещё раз хочу обратить ваше внимание на то, что пример работает без какого либо JavaScript. И он намного более инклюзивный чем традиционная верстка на .

Источник