<ul><li><details> and <summary> HTML elements, collectively referred to as a disclosure widget, are not easy to style.</li><li><details> is an HTML element that creates a disclosure widget in which additional information is hidden.</li><li>There are a few interoperability issues that should be considered when styling the <details> and <summary> elements.</li><li>We can add a transition animation to the opening and closing actions of a disclosure widget.</li><li>A common UI pattern is an accordion component.</li><li>The marker is associated with the <summary> element.</li><li>You may want to style the “additional information” section of the disclosure widget without leaking styles to the <summary>.</li><li>The good news is that there is an active proposal that addresses the styling of the marker.</li><li>In the near future, you won’t need to write your own disclosure widget or use a third-party web component!</li><li><details> HTML element has gotten much easier to customize in CSS.</li></ul>

Styling HTML and with modern CSS

Discover more