Form Styling

All in one: every form style, side by side

What this example compares

The four lines: nothing vs font-family: inherit vs font: inherit vs padding vs border-radius vs all four together
width: 100%: box-sizing: content-box (pokes out) vs border-box vs * { box-sizing: border-box; }
Label and field: an inline label vs display: block vs one column vs display: flex + flex: 1
Grouping: the default <fieldset> + <legend> vs a restyled one
Focus: the browser's ring vs your outline + outline-offset vs a thicker border vs outline: none, and :focus vs :focus-visible
Buttons: styled vs cursor: pointer vs :hover vs :active vs :disabled
Validity: :invalid vs :invalid:not(:placeholder-shown) vs :valid vs :valid:not(:placeholder-shown), colour plus words, and :placeholder-shown vs ::placeholder
Checkbox and radio: background and border (ignored) vs accent-color, bigger boxes, and a slider and progress bar
Your own shape: appearance: none vs your own border vs :checked::before
The select box: appearance: none, then background-image, background-repeat, background-position and padding-right, one at a time
Textarea: the default resize: both vs resize: vertical vs min-height
File upload: <input type="file"> vs a hidden input with a styled <label>
Accessibility rules: placeholder only vs a real label, faint text vs 4.5:1 contrast, a tiny target vs 44 × 44 pixels
All together: the project's "Contact Asha" form

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fourteen panels (scroll inside the result to reach them all). In panel 1 only the third and sixth boxes show their field, dropdown and button in the same large Georgia font as the page; the second has Georgia but still small. In panel 2 the first field sticks out past its dashed column, while the other two fit. Panel 3 shows the label beside its field, above it, a tidy one-column form, and two equal fields side by side. Panel 4 shows an old grey frame and a light rounded one. Panels 5 and 6 change only when you use them: click into fields, press Tab, hover and press the buttons (the last button is grey and cannot be clicked). In panel 7 the first box is red even in its empty field, the second is red only where something wrong was typed, the third is green even for the empty phone, the fourth is green only for the typed address, the fifth adds "Enter a valid email address", and the sixth shows bluish-grey hints. In panel 8 the second box looks exactly like the first, and the third, fourth and sixth are orange. In panel 9 the first box has no visible tick box, the second an empty orange box, the third an orange box with a tick. In panel 10 the arrow disappears, tiles across the box, sits at the top left, moves to the right, and finally leaves room for the text. Panels 11 and 12 show three message boxes and two upload controls, panel 13 shows three wrong-and-right pairs, and panel 14 is Asha's contact form. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 7, why is the empty email field red in the first box but plain in the second, when both are equally empty?

An empty required field is already invalid when the page loads, so input:invalid paints it red before anyone has typed. The second box adds :not(:placeholder-shown), which means "and not empty", so its rule waits until the user has typed something.