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

Question

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

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

<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-input / ). Вы можете изменить это, но это не так очевидно.

EDIT

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

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

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

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

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

Answer 1

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

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

Код

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

details > summary {display:block}

Answer 5

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

Answer 6

резюме :: - webkit-details-marker { font-size:0px }

✔