How to Style Input Fields and Labels with CSS

Text inputs

index.html

HTML

<style>
  input[type="text"], input[type="email"] {
    width: 100%; max-width: 300px; box-sizing: border-box;
    padding: 10px 12px; font: inherit;
    border: 1px solid #b9b2ad; border-radius: 6px; background: #fff;
  }
  input:focus { border-color: #1a5276; outline: 3px solid #1a527633; }
</style>
<input type="text" placeholder="Name"><br><br>
<input type="email" placeholder="Email">

padding makes the field comfortable to tap.
border should have enough contrast to see the field’s edge (at least 3:1 against the background).
Leave a visible state on :focus.

Labels

Every field needs a <label>. Connect them with for and id, so a click on the label focuses the field.

index.html

HTML

<style>
  .field { margin-bottom: 14px; max-width: 300px; font-family: system-ui, sans-serif; }
  .field label { display: block; margin-bottom: 4px; font-weight: 600; }
  .field small { display: block; margin-top: 4px; color: #5c5750; }
  .field input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #b9b2ad; border-radius: 6px; font: inherit; }
</style>
<div class="field">
  <label for="u">Username</label>
  <input id="u" type="text">
  <small>Letters and numbers only.</small>
</div>

Put the label above the field on small screens. Side-by-side labels need more room.

Checkboxes and radio buttons

Styling these from scratch is awkward. The modern shortcut changes their color and keeps them accessible:

index.html

HTML

<style>
  input[type="checkbox"], input[type="radio"] { accent-color: #d94a00; width: 18px; height: 18px; vertical-align: middle; }
  label { margin-left: 4px; }
</style>
<input type="checkbox" id="x" checked><label for="x">Gift wrap</label><br>
<input type="radio" id="y" name="r" checked><label for="y">Standard delivery</label><br>
<input type="radio" id="z" name="r"><label for="z">Express delivery</label>

accent-color recolors the checked state. Keep the click target large by connecting the label.

warning

Removing the field border

A field with no border and a white background on a white page is invisible. Keep a visible boundary, not only a placeholder.