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.
- Allows you to make a kind of accordion box in pure HTML. By default closed but the
<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="progressbaron a div.
Click me for a code demo
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:
Use the `role="progressbar" to style it more easily: