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

Теперь я еще рано, но я также знаю, что вы, ребята, на вершине.

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

<details>
<summary>What 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 beta является единственным браузером, который фактически предоставляет функциональность элемента details (нажатие на сводку переключает содержимое деталей). Поэтому, чтобы ответить на следующий вопрос, вы, вероятно, захотите использовать этот браузер.

Знаете ли вы, как можно скрыть стрелку, отображаемую по умолчанию в элементе данных в 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, или в настоящее время нет возможности вообще изменить ситуацию.

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

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

Ответ 1

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

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

Код

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

details > summary {display:block}

Ответ 5

summary:: - webkit-details-marker { font-size:0px }

✔

Ответ 6

Согласно 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;
}