Details

Fullscreen click area

Use .details-overlay to expand the click area of <summary> to cover the full screen, so user can click anywhere on a page to close <details>.

Darkened fullscreen click area

Use .details-overlay-dark darken the click area overlay. Useful for modals.

Custom caret

Use .details-reset to remove the default caret (that little triangle on the left). You then can add the .dropdown-caret on the right of the text.

Using button styles with the details summary element

You can add .btn and .btn-* classes to any <summary> element so that it gains the appearance of a button, and selected/active styles when the parent <details> element is open.

Edit this page on GitHub

1 contributor

Last edited by simurai on February 1, 2023