CSS property 'list-style-type' supports two new keywords 'disclosure-open' and 'disclosure-closed'. In an element with display:list-item, 'disclosure-open' shows a symbol indicating a widget like <details> is opened. 'disclosure-closed' shows a symbol indicating a widget like <details> is closed. They will be used for the default style of <summary> in the user-agent stylesheet.

Motivation

This is a step of standardizing a way to customize the appearance of the disclosure triangle of <details> and <summary>. 'disclosure-open' and 'disclosure-closed' will be used as the default style of <summary>. Web developers can use these keywords to reset the <summary> appearance, and to create a UI widget like <details>/<summary> with their own code.

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

Search tags

css,

Last updated on 2021-01-19