Скрытие стрелки элемента <details> в Chrome: решение CSS

Быстрый ответ

Для того чтобы скрыть стрелку у элемента <details> в Chrome, выполните следующие действия:

details > summary::marker {
    display: none;
    content: ''; /* Прощай, стрелочка, теперь ты здесь не нужна! */
}

Таким образом, элемент <details> сохранит свою функциональность, но стрелка на нём более не будет отображаться.

Практические рекомендации по скрытию стрелки

Спрятать стрелку на элементе <details> возможно несколькими способами, который соответствуют спецификации HTML5.

Кроссбраузерный метод: псевдоэлемент ::marker

Псевдоэлемент ::marker подходит для работы в любом браузере:

details > summary::marker {
    display: none; /* Больше никаких стрелок, проблема решена! */
}

Подробнее об этом расскажет наш спикер на видео

Хромоспецифичный способ: псевдоэлемент ::-webkit-details-marker

Для браузеров Chrome и Safari можно использовать префикс -webkit-:

details > summary::-webkit-details-marker {
    display: none; /* Эй, Chrome, смотри, стрелка исчезла! */
}

<details> без summary:

Если элемент <details> не содержит summary:

details:not(summary) {
  list-style: none; /* Если нет summary, то и стрелки нет! */
}

Убеждаемся в отсутствии маркеров списка по умолчанию.

Визуализация

Стрелка у <details> может быть незаметной, но это не умаляет её значимости:

<details>
  <summary>Больше информации 🚩</summary>
  Контент, предназначенный для отображения...
</details>

Удаляем стрелку (🚩), меняя list-style:

details > summary {
  list-style: none; /* До свидания, стрелка! */
}
details > summary::-webkit-details-marker {
  display: none; /* 🚩 никогда не вернётся */
}

После применения изменений:

<details>
  <summary>Больше информации</summary> <!-- Теперь стрелки нет 🚩 -->
  И вот пред нами отрывок информации.
</details>

Теперь интерфейс выглядит куда более аккуратно, без взгляду мешающих визуальных помех.

Глубокое погружение: Еще больше способов контроля над 'стрелкой' и возможностей

Осуществляя детализированную настройку <details>, разработчики получают большую свободу для манёвра:

Добавление пользовательских стилей через ::before или ::after

Псевдоэлементы ::before и ::after позволяют добавить элементы оформления или заменить стрелку на вашу иконку.

Собственная иконка вместо стрелки

Вы можете использовать собственную иконку, загружаемую по URL или в виде элемента иконочного шрифта в ::before:

details > summary::before {
    content: url('путь-к-иконке.png'); /* Ваш настраиваемый символ! 🎉*/
}

Тестирование в различных браузерах

Отображение <details> может различаться в разных браузерах, поэтому советуем проверять стилизацию с помощью таких инструментов, как BrowserStack или CrossBrowserTesting.

Браузеры, не поддерживающие <details>

Для браузеров, не поддерживающих <details> (например, IE), можно использовать полифиллы, например, javan/details-element-polyfill.

ARIA для доступности

Настройка <details> не должна затруднять доступность, поэтому при необходимости используйте ARIA-атрибуты для корректной передачи состояний и ролей в скринридерах.

Полезные материалы

1. Элементы details и summary | CSS-Tricks — детальное руководство по настройке элементов <details> и <summary>.
2. <details>: Элемент раскрытия деталей – HTML: язык разметки гипертекста | MDN — официальная документация с примерами использования.
3. html – Как создать переключатель с кликабельной меткой? – Stack Overflow — обсуждение и решения сходных задач на Stack Overflow.
4. Полное руководство по элементу таблицы | CSS-Tricks — детальное рассмотрение структуры и стилизации таблиц.
5. Элементы details & summary | Can I use... Support tables for HTML5, CSS3, etc — информация о совместимости элементов <details> и <summary> с различными браузерами.
6. GitHub – javan/details-element-polyfill: <details> — полифил для поддержки <details> в старых версиях браузеров.
7. HTML Standard — стандарт HTML с описанием элемента <details>.