20 min read

Styling Forms

Labels on their own lines, full-width fields, clear focus outlines, tidy fieldsets and friendly buttons.

A Friendly Form

What the browser shows

Try it:

Click into a field to see the focus outline. Remove display: block from label and see the labels jump beside the fields.

Choices side by sideCSS

1.choice {2  display: inline-block;3  font-weight: normal;4  margin-right: 16px;5}

On the example site, each checkbox and radio button is wrapped in a label with class="choice", so the options sit in a row instead of one per line.

Practice

Which rule puts each label on its own line above its field?

A Friendly Form

What the browser shows

Try it:

Click into a field to see the focus outline. Remove display: block from label and see the labels jump beside the fields.

Checkboxes and Radio Buttons

Choices side by sideCSS

1.choice {2  display: inline-block;3  font-weight: normal;4  margin-right: 16px;5}

On the example site, each checkbox and radio button is wrapped in a label with class="choice", so the options sit in a row instead of one per line.

Practice

Which rule puts each label on its own line above its field?