Styling Forms

Styling Forms

Style inputs, selects, textareas, and buttons to match your design.

Input basics

input[type="text"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Always use box-sizing: border-box on inputs so padding doesn't explode them.

Focus state

input[type="text"]:focus {
  border: 2px solid #555;
  outline: none;           /* remove ugly default ring */
}

Better: replace the ring with box-shadow:

input:focus {
  outline: 3px solid #2196F3;
}

Inputs with icons

Wrap the input in a container and absolutely-position an icon:

.input-wrap {
  position: relative;
}
.input-icon {
  position: absolute;
  left: 8px;
  top: 8px;
}

Select, textarea, button

select, textarea {
  width: 100%;
  padding: 8px;
}
button {
  background-color: #04AA6D;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #06945b;
}

Interesting: checkboxes and radios

Styling them requires appearance: none, modern way:

input[type="checkbox"] {
  appearance: none;
}

Then build your own. Advanced, but fun!

TL;DR

• Style input[type="..."] directly.
• Handle :focus (keep accessibility visible).
• Use box-sizing: border-box on inputs.
• cursor: pointer on buttons.
• Custom checkboxes via appearance: none.