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

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

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

<details>
<summary>What's the HTML5 details element?</summary>
<p>The details element represents a disclosure widget from which the user can obtain additional information or controls.</p>
</details>

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

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

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

ИЗМЕНИТЬ

Пробовал следующий код CSS без успеха:

details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}

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

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

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


google-chrome html css summary details
person DADU    schedule 01.06.2011    source источник

Ответы (6)


arrow_upward
101
arrow_downward

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

Код

details summary::-webkit-details-marker {
  display:none;
}

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

person DADU    schedule 01.06.2011
comment
Единственная проблема, которую я вижу, заключается в том, что это не будет работать в разных браузерах, как только другие начнут поддерживать <DETAILS>. - person Ky Leggiero; 04.04.2013
comment
Когда они это сделают, они, вероятно, добавят свою собственную версию с префиксом, как в текущем способе стилизации заполнителя ввода. - person DADU; 07.04.2013
comment
У меня была странная проблема с отображением, связанная с глупым треугольником, и инструменты разработчика Chrome не показывали мне селектор для этой вещи. Спасибо! - person w--; 30.04.2016
comment
Это работает для Chrome, но для поддержки Firefox это также необходимо: ответы должны быть объединены. - person Tamás Bolvári; 26.10.2016
comment
Я уважаю, что этот ответ был отличным в то время, но на самом деле к настоящему времени у нас должно быть хорошее кросс-браузерное, совместимое со стандартами решение здесь, специфичное для webkit. - person Stijn de Witt; 06.07.2017
comment
Что-то из этого работает в Safari? Здесь нет Safari для тестирования. - person Victoria; 22.03.2019
comment
Это работает с Chrome, но не работает с Firefox, вам нужно добавить summary {list-style: none;} , чтобы он работал в Firefox. - person Gsp Ivan; 09.02.2021
comment
Стоит отметить, что для этого элемента теперь есть префиксный селектор, не относящийся к вебкиту: :marker Для этого вам нужно ::marker{ display:none; } summary{ list-style: none } - person Anthony Cregan; 14.03.2021
comment
Если вы по-прежнему хотите, чтобы виджет занимал место (например, если вы хотите выровнять текст нескольких последовательных элементов details, не все из которых являются расширяемыми), вам следует использовать visibility:hidden вместо display:none. - person BallpointBen; 16.03.2021
comment
Вероятно, вы захотите использовать селектор details > summary::marker, чтобы выбрать только ту часть, которую хотите изменить. - person Mikko Rantalainen; 24.06.2021

arrow_upward
46
arrow_downward

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

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

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
person thmsnhl    schedule 18.06.2019
comment
для меня это самый подходящий ответ, потому что он работал у меня как в Firefox, Safari, так и в Chrome. - person Gsp Ivan; 09.02.2021

arrow_upward
21
arrow_downward

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

details > summary:first-of-type {
    list-style-type: none;
}

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

person Rose Kunkel    schedule 01.06.2011
comment
Это работает для Firefox, но для поддержки Chrome это также необходимо: ответы должны быть объединены. - person Tamás Bolvári; 26.10.2016

arrow_upward
11
arrow_downward

Пересматривая в 2021 году, ::-webkit-details-marker больше не работает. Вам нужно настроить таргетинг на псевдоэлемент ::marker следующим образом:

details > summary {
  list-style: none;
}
details > summary::marker {
  display: none;
}
person eyecatchUp    schedule 26.03.2021
comment
Все остальные ответы не работают в 2021 году, пожалуйста, используйте эту цель, ребята. Спасибо оп. - person Bowie Chang; 14.04.2021
comment
@eyecatchup ты знаешь, как предотвратить его открытие? Я не хочу показывать, что скрывают «детали». - person Luis; 08.07.2021

arrow_upward
7
arrow_downward

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

::-webkit-details-marker {
  display:none;
}
person Crystal    schedule 29.07.2015

arrow_upward
5
arrow_downward

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

details > summary {display:block}
person Taufik Nurrohman    schedule 26.02.2019