Some cool HTML interactive elements

You might not know these but they can be super useful. Their main default is that they are sometimes hard to style properly.

<details> and <summary>
Allows you to make a kind of accordion box in pure HTML. By default closed but the open attribute on <details> can make it open.
Can be used as an input with a list of options auto-suggested by what the user is typing.
A progress with several attributes for showing progress. It's very hard to style correctly but you can have the same accessibility by using the role="progressbar on a div.
Click me for a code demo
You though it was code but it was me Dio!
SURPRISE | Full size

A datalist can be useful but requires a full form, which is quite a lot of code:

A progress bar using <progress> has this look:

20 %

Use the `role="progressbar" to style it more easily:

20 %

Initially published: November 23rd, 2020
Generated: March 3rd, 2023