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