CSS Forms

CSS Forms

Forms are essential for user interaction. CSS helps you make forms cleaner, more readable, and easier to use by improving spacing, borders, focus states, and overall layout.

Style Forms

A good form layout usually starts with spacing, readable labels, and a consistent width.

.form {
  max-width: 520px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.form-group {
  margin-bottom: 14px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

Style Inputs

Inputs can be styled using borders, padding, and width. A common pattern is to make inputs full width.

.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 16px;
}

For a consistent look, style placeholders as well:

.input::placeholder {
  color: #888;
}

Input Focus / Icons

Focus styles improve usability and accessibility. Avoid removing focus outlines unless you replace them with a visible alternative.

.input:focus {
  outline: 3px solid #1f4bd8;
  outline-offset: 2px;
  border-color: #1f4bd8;
}

To place an icon inside an input, wrap it in a positioned container and add left padding.

<div class="input-wrap">
  <span class="icon">🔍</span>
  <input class="input input-icon" type="text" placeholder="Search...">
</div>

.input-wrap {
  position: relative;
}

.icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
}

.input-icon {
  padding-left: 40px;
}

Other Form Elements

Forms include more than text inputs. You may also style textarea, select, checkbox, and radio elements.

Textarea

textarea.input {
  min-height: 120px;
  resize: vertical;
}

Select

select.input {
  background: #fff;
}

Checkbox / Radio (simple spacing style)

.option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

Buttons

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #1f4bd8;
  background: #1f4bd8;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.95;
}

Code Challenge

Goal: Build and style a simple form with clean inputs and focus effects.

HTML:

<form class="form">
  <div class="form-group">
    <label>Name</label>
    <input class="input" type="text" placeholder="Your name">
  </div>

  <div class="form-group">
    <label>Email</label>
    <input class="input" type="email" placeholder="you@example.com">
  </div>

  <div class="form-group">
    <label>Message</label>
    <textarea class="input" placeholder="Write something..."></textarea>
  </div>

  <button class="btn" type="submit">Send</button>
</form>

Task:

• Add a max width and spacing to the form
• Make inputs full width with padding and rounded corners
• Add a clear focus state (outline or border)
• Style the button

Try a Solution:

.form {
  max-width: 520px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.form-group {
  margin-bottom: 14px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 16px;
}

.input:focus {
  outline: 3px solid #1f4bd8;
  outline-offset: 2px;
  border-color: #1f4bd8;
}

textarea.input {
  min-height: 120px;
  resize: vertical;
}

.btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #1f4bd8;
  background: #1f4bd8;
  color: #fff;
  cursor: pointer;
}

What’s Next?

Next, you will learn how to use CSS counters to create automatic numbering.