The default value of CSS 'display' property for <summary> is changed to 'list-item' from 'block'. We also support '::marker' pseudo element selector for <summary>, and remove '::-webkit-details-marker' pseudo element selector. Before this change, developers did the following in order to hide the details marker: summary::-webkit-details-marker { display: none; margin-inline-end: 0; } Now developers can do: summary { display: block; } or summary { list-style-type: none; }

Motivation

This is a step of standardizing a way to customize the appearance of the disclosure triangle of <details> and <summary>. Web developers can customize <summary> appearance with not vendor-prefixed '::-webkit-details-marker' but the standard '::marker'.

Specification

Editor's draft

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 89
  • Chrome for Android release 89
  • Android WebView release 89

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Last updated on 2021-05-16