Html5 спойлер: Спойлер | WebReference

— HTML | MDN

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

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

Content categories	Flow content, sectioning root, interactive content, palpable content.
Permitted content	One <summary> element followed by flow content.
Tag omission	Нет, открывающий и закрывающий теги обязательны.
Permitted parents	Any element that accepts flow content.
Permitted ARIA roles	None
DOM interface	HTMLDetailsElement (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

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.

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

Новые теги HTML5 — Как создать сайт

Новые теги в языке HTML5

Новые теги HTML5 — это теги, которые появились в спецификации языка HTML5. Внимание, некоторые теги пока не поддерживаются браузерами, со временем эта ситуация должна исправиться.

Новые теги HTML5 по алфавиту

<article> </article> — основной контент страницы, тег HTML5,
<aside> </aside> — боковая панель (сайдбар) сайта, тег HTML5,
<audio> </audio> — воспроизводит аудиофайлы, создаёт панель управления ими, тег HTML5,
<bdi> </bdi> — запрещает изменять направление текста, тег HTML5,
<canvas> </canvas> — замена флэш-технологии, тег HTML5,
<command> — команда-переключатель, тег HTML5,

Читать далее: Устаревшие теги HTML

• Category: Разное

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 15 октября 2014

Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

html. Как скрыть стрелку, отображаемую по умолчанию в элементе HTML5 в Chrome?

Задавать вопрос

спросил 11 лет, 11 месяцев назад

Изменено 7 месяцев назад

Просмотрено 82к раз

Мне еще рано, но я также знаю, что вы, ребята, на высоте.

Я хочу использовать элемент сведений HTML5:

 

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

На момент написания этой статьи бета-версия Chrome 12 была единственным браузером, который фактически предоставлял функциональность элемента сведений (нажатие на сводку переключает содержимое сведений). Итак, чтобы ответить на следующий вопрос, вы, вероятно, захотите использовать этот браузер.

Знаете ли вы, как скрыть стрелку, которая отображается по умолчанию в элементе сведений в Chrome?

Это немного похоже на стиль по умолчанию в Webkit (см. http://css-tricks.com/webkit-html5-search-inputs/). Вы можете изменить его, но это не так очевидно.

РЕДАКТИРОВАТЬ

Безуспешно пробовал следующий код CSS:

 детали,
сводка деталей {
заполнение слева: 0;
фоновое изображение: нет;
-webkit-внешний вид: нет;
}
 

Возможно, нам понадобится использовать какой-то странный псевдоселектор, например details::-webkit-details-disclosure-widget , или в настоящее время нет никакого способа что-то изменить.

Кроме того, я нашел это в спецификации:

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

• html
• css
• google-chrome
• html-tag-details
• html-tag-summary

Я не планировал отвечать на свой вопрос, но у меня есть решение.

• Источник: http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
• Подробнее о рекомендации для виджета раскрытия информации:
  http://mail-archive.com/[email protected]/msg26129.html

Код

 сводка сведений::-webkit-details-marker {
  дисплей:нет;
}
 

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

Согласно https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget

Вы можете добиться этого с помощью:

 details > summary {
  стиль списка: нет;
}
подробности > резюме::-webkit-details-marker {
  дисплей: нет;
}
 

Возвращаясь к 2021 году, ::-webkit-details-marker n̶o̶ ̶l̶o̶n̶g̶e̶r̶ работает только для Safari. Для всех других браузеров bmodern вам нужно настроить таргетинг на псевдоэлемент ::marker следующим образом:

 details > summary {
  стиль списка: нет;
}
details > summary::marker, /* Последние версии Chrome, Edge, Firefox */
подробности > резюме::-webkit-details-marker /* Safari */ {
  дисплей: нет;
}
 

Кодепен

Я не уверен, что это сработает, учитывая, что на моем текущем компьютере не будет работать Chrome, и у меня нет доступа к компьютеру, который я обычно использую, но попробуйте добавить это в свой файл css:

 details > summary:first -типа {
    тип стиля списка: нет;
}
 

Скажите, работает ли это, я видел это только в рекомендации, а не в официальной спецификации.

Я считаю, что это работает достаточно хорошо.

 ::-webkit-details-marker {
  дисплей:нет;
}
 

Я использую Firefox 65.0.1 и могу удалить стрелку следующим образом:

 подробности > сводка {display:block}
 

 сводка::-webkit-details-marker {
  размер шрифта: 0px
}
 

Изменение отображения на «блок» удалит стрелку.

 сводка {
    дисплей:блок;
}
 

В моем примере я вижу, что это просто вопрос перезаписи отображения fromlist-item на other. Следовательно, в настоящее время мы используем этот тип так же, как мы используем flex, grid и т. д. — все они имеют свои реферальные атрибуты.

🙂

Мой ответ: Просто запустите devtools и установите пользовательское значение для атрибутов display и/или list-style-type,list-style.

 подробности{
фон:желтый;
радиус границы: 4px;
курсор:указатель;
}
краткое содержание{
/* ОТВЕТ НИЖЕ*/
    стиль списка: нет;
/* ОТВЕТ ВЫШЕ*/
    фон:зеленый;
    граница: 1px сплошной красный;
} 

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

Это решение сработало для меня, так как наивысший рейтинг не работал для меня в Chrome. Это вариант исходного решения.

 сводка сведений {
стиль списка: нет;
 

}

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Обязательно, но не отображается

Опубликовать как гость

Требуется, но не отображается

Простые спойлеры Flarumite — чистый HTML5 и CSS

davwheat

• HTML5 только спойлеры — JS не нужен!
• Работает с FriendsOfFlarum/ночной режим
• Интегрируется со стандартным Flarum BBCode
• Поддерживает все современные браузеры (96,26% веб-трафика)

Расширение Flarum. Добавляет простые спойлеры на ваш форум. Использует чистый HTML и CSS без JavaScript.

Поддерживает ночной режим FriendsOfFlarum.

Поддержка браузера

Поскольку это расширение использует элементы

 composer require flarumite/simple-spoilers:"*" 

 composer update flarumite/simple-spoilers:"*"
кеш php flarum: очистить 

 [спойлер]
Некоторый контент
[/spoiler] 

 [spoiler title=Мой классный заголовок]
Некоторый контент
[/спойлер]

 [спойлер]
тест
[спойлер]
встроенный
[спойлер]
встроенный
[спойлер]
встроенный
[/спойлер]
[/спойлер]
[/спойлер]
[/spoiler]