This content originally appeared on Bram.us and was authored by Bramus!
As of Chrome 131 you have more options to style <details> and <summary>.
You can now set display property values other than block on these elements, and also use a ::details-content pseudo-element to style the part that expands and collapses.
The following demo featuring a horizontal accordion uses all these features:
See the Pen
Styling <details>: Horizontal Accordion by Bramus (@bramus)
on CodePen.
If your browser does not support these features yet, check out the reference recording at the top of this post. At the time of writing, only Chrome supports these additions. The PR to add this to WebKit already got merged on main, so you can also expect this in an upcoming Safari release.
Go read my article on developer.chrome.com to learn all about it.
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2024-12-03T20:58:14+00:00) More options for styling <details>. Retrieved from https://www.scien.cx/2024/12/03/more-options-for-styling-details/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.