Input styles

Learn to style the input element.

What is the input selector?

In an HTML form, text boxes, email fields and password entries mostly use the <input> tag. In CSS, writing input selects every instance of this tag.

The browser gives inputs a default look: thin border, pale background, small font. That look falls short in many designs. Styling makes a field readable and easy to tap.

Padding and font size

To make an input comfortable to use, you need padding and a readable font size. The default input is small and cramped; tapping it is hard.

A common setting: padding: 12px 16px; and font-size: 1rem;. The field grows, text stays readable. To style all fields at once, the input selector is enough.

Exercise Style a form field

Inside a .field selector, write three properties: padding: 12px 16px;, font-size: 1rem;, border: 1px solid #ccc;.

Show example solution

open a .field selector; write the three declarations.
Example solution:
.field {
  padding: 12px 16px;
  font-size: 1rem;
  border: 1px solid #ccc;
}

Test yourself

Which selects all input fields?
- form { ... }
- input { ... }
- .input { ... }
- #input { ... }
Show answer

input { ... } — Correct! input is a type selector and matches every input tag.

Give the input inner space

input {
  ____: 12px 16px;
  font-size: 1rem;
}

Show answer

input {
  padding: 12px 16px;
  font-size: 1rem;
}

Match input properties

padding

inner space
font-size

text size
border

edge line
background

backdrop

Next lesson: Label and placeholder

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies