Copy-and-paste CSS form designs

The browser’s default input field honestly looks a bit drab and utilitarian. But a form is the one place on a page where the other person actually moves their hands. Here are 8 form designs that make people want to type, each with a live demo. Just copy, paste, and change the color.

Input field basics

Start with the basic tidy-up

Three things: spacing, a border, and rounded corners. This alone turns “office stationery” into a “designed component.”

input {
  padding: 12px 16px;
  font: inherit;
  border: 2px solid #ddd;
  border-radius: 10px;
}

Don’t forget font: inherit—input fields don’t inherit the surrounding font, so without it, only the text ends up looking out of place.

A focus cue

It’s kind to respond with color the moment someone clicks so they can tell which field can be typed in right now.

input:focus {
  border-color: #ff8a3d;
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.2);
}

Labels and a stacked layout

The stacked layout of “label on top, input below” is a classic arrangement where the eye never gets lost.

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stack label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: bold;
}

All the gaps are managed with gap. Add more items and it won’t break.

A textarea

For the <textarea> of a comments or message field, letting it stretch only vertically makes it easier to use.

textarea {
  min-height: 90px;
  resize: vertical;   /* stretch vertically only */
}

Without resize: vertical, it can also be stretched horizontally, which becomes a cause of broken layouts.

A step up

A rounded search box

An input field and a button merged into a single capsule—a staple header part.

.search {
  display: flex;
  border: 2px solid #ddd;
  border-radius: 999px;
  overflow: hidden;
}
.search:focus-within {
  border-color: #ff8a3d;
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.2);
}
.search input { flex: 1; border: none; outline: none; }
.search button { border: none; }

Give just one border to the outer .search, and remove it from the inner parts—that’s the whole trick to making them “one piece.”

Since we’ve removed the input’s outline, we make up for it by using :focus-within (while any of the inner elements is selected) to light up the whole outer capsule. Again, never just leave the cue removed.

Match the check color: accent-color

The “blue” of checkboxes and radios can actually be changed to your theme color in one line.

input {
  accent-color: #ff8a3d;
}

There’s also a way to replace them with your own custom look, but for now this one line is more than enough to make them look neat and consistent.

How to show errors

“Something is wrong” is conveyed with a set of a red border plus a word right beside it.

input.error {
  border-color: #e5484d;
  background: #fff5f5;
}
.error-message {
  color: #e5484d;
  font-size: 12px;
}

The point is to not rely on color alone and always add a text message. Writing what to fix and how is even kinder.

The finished form: a mini contact form

A finished form combining the parts so far. Copy the whole thing and use it as a template for your own page.

Summary

1. Start input fields from the basic set of spacing, border, rounded corners, plus font: inherit.
2. A :focus cue is a must. If you remove outline, always provide a replacement cue.
3. Show errors with the set of a red border plus a text message (don’t rely on color alone).

When a form feels pleasant, the chance of getting a message really does go up. Start with the basic tidy-up.