CSS Forms

A form is how a visitor sends information to a website — a name, an email address, a course choice, a message. Plain HTML forms work, but they look dull and cramped: thin grey boxes, small text, and a button that looks like it came from the 1990s. CSS turns that same form into something clear, comfortable, and easy to fill in.

Diagram — see how it fits together

Styling a form is mostly about three things: space (padding inside each field so the text can breathe), borders (a clear edge so the visitor can see where to type), and feedback (the field changes when you click into it, so you always know where you are).

Styling an input field

Every text field, email field, and text area can be styled like any other box. The most useful properties are width, padding, border, border-radius, and font-size. Setting width: 100% makes the field stretch to fill its container, which is what most real forms do. A little border-radius rounds the corners and instantly makes the form feel modern.

Syntax — a styled text field

input[type="text"] {
  width: 100%;
  padding: 12px;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

The selector input[type="text"] picks only text fields, so a checkbox or a submit button is not affected. You can write similar rules for input[type="email"], select, and textarea — or group them in one rule with commas.

Focus states — show where you are typing

When a visitor clicks into a field, the browser gives it focus. The :focus pseudo-class lets you style that moment. A common trick is to change the border colour and add a soft glow with box-shadow. It costs two lines of CSS and makes the form feel alive.

input[type="text"]:focus {
  border-color: #04aa6d;
  outline: none;
  box-shadow: 0 0 5px #04aa6d;
}

Placeholder text

The placeholder attribute shows a faint hint inside an empty field, like "Your full name". You can style that hint with the ::placeholder pseudo-element — usually a soft grey colour so it is clearly different from real typed text.

::placeholder {
  color: #999;
}

Labels and buttons

A label should sit above its field, in bold, so the visitor can scan the form quickly. The submit button deserves the most attention: give it a strong background colour, white text, generous padding, and a cursor: pointer so the hand cursor appears on hover. A hover colour change tells the visitor the button is ready to click.

Common mistakes

• Forgetting box-sizing: border-box — fields with width: 100% and padding stick out of the form.
• Removing the outline on :focus without adding any replacement — keyboard users can no longer see where they are.
• Using the placeholder as the only label — once the visitor starts typing, the hint disappears and they forget what the field was for.
• Making the button tiny or the same colour as the background — the visitor should spot the submit button in one glance.
• Setting a very small font-size on inputs — on phones, a font smaller than 16px makes the browser zoom in when the field is tapped.

Remember

• Style inputs with width, padding, border, and border-radius.
• Use :focus to highlight the field the visitor is typing in.
• Style placeholder hints with ::placeholder, in a soft grey.
• Keep labels visible above each field — a placeholder is a hint, not a label.
• box-sizing: border-box keeps padded fields inside their container.

Example explained

• box-sizing: border-box on everything — padding and borders are counted inside each element's width, so the form fields never overflow their box.
• input[type="text"], input[type="email"], select, textarea — one grouped rule styles every field the same way: full width, 12px of padding, a soft grey border, and rounded corners.
• input:focus, select:focus, textarea:focus — when a visitor clicks into a field, its border turns green and a soft glow appears, so it is obvious where they are typing.
• ::placeholder — the grey hint text inside empty fields, like "Your full name", is shown in a lighter colour than real typed text.
• input[type="submit"] — the button is green with white text and wide padding; on :hover it turns a darker green, so the visitor knows it can be clicked.