Fun with Forms

Animated Labels / Placeholders

Name

Input fields with placeholders that become labels when you click inside.
Scratched this together from a couple of sources.
My notes on how the magic happens.
Link to Codepen

Custom Checkboxes using Boxshadow, animated

option A option B option C option D

Very simple but effective method: minor styling (no hiding) of default checkbox. On being checked it receives an inset box-shadow.
Props and thanks to Prethi at CSS-Tricks.
Link to Codepen

<fieldset> and <legend>

Personalia First name:

Last name:

Plain HTML, no CSS involved. Just the <fieldset> and <legend> element combo.

<optgroup>

Allows for grouping options of the select field.

Styling input elements with accent-color

(not yet in all browsers)

Checkboxes I'm a regular checkbox
I got accent-color styling

Radio Buttons This is awesome. I am..
unimpressed, will have none of it.
amazed
stoked
flabbergasted

Range Slider

Styling of checkboxes and the like used to be a hassle. Coloring at least recently became very easy and light-weight with accent-color.