CSS Tutorial

CSS Forms

Default form controls look plain and inconsistent across browsers. With CSS you can style inputs, textareas, selects, and buttons into a polished, cohesive form. This guide covers padding and borders, focus states that guide the user, and a complete styled contact form you can run and edit.

Styling Text Inputs

The starting point for any form is the text input. Add padding for comfortable click targets, a border and border-radius for shape, and box-sizing: border-box so padding does not blow out your intended width. Setting width: 100% makes inputs fill their container.

Base input styles

input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-sizing: border-box;
}

Focus States

The :focus pseudo-class styles a field while it is active (clicked into or tabbed to). A clear focus state tells the user exactly where they are typing and is essential for keyboard accessibility. A common pattern changes the border color and adds a soft glow with box-shadow.

input:focus, textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
  outline: none;
}

⚠️

If you remove the default outline with outline: none, you must add a visible replacement such as a border color change or box-shadow. Removing focus indicators entirely makes a form unusable for keyboard users.

Complete Styled Contact Form

Here is a full, working form that ties it together: labels, styled text and email inputs, a select dropdown, a textarea, focus states, and a button that reacts on hover. Click into a field to see its focus style.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; background: #f1f5f9; padding: 20px; }
  form { max-width: 380px; background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
  label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin: 12px 0 6px; }
  input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; font: inherit; }
  input:focus, select:focus, textarea:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,0.2); outline: none; }
  textarea { resize: vertical; min-height: 80px; }
  button { margin-top: 16px; width: 100%; background: #0f766e; color: #fff; border: none; padding: 12px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
  button:hover { background: #0d5f59; }
</style>
</head>
<body>
  <form>
    <label for="name">Name</label>
    <input id="name" type="text" placeholder="Jane Doe">
    <label for="email">Email</label>
    <input id="email" type="email" placeholder="jane@example.com">
    <label for="role">Interested in</label>
    <select id="role">
      <option>Internship</option>
      <option>Full-time job</option>
      <option>Freelance</option>
    </select>
    <label for="msg">Message</label>
    <textarea id="msg" placeholder="Tell us more..."></textarea>
    <button type="submit">Send message</button>
  </form>
</body>
</html>

Useful Form Selectors

Selector	Targets
input[type="text"]	Only text inputs (attribute selector)
:focus	The field currently being edited
::placeholder	The greyed-out placeholder text
:disabled	Inputs that cannot be edited
:checked	Selected checkboxes and radio buttons
:valid / :invalid	Fields that pass or fail HTML validation

Styling Placeholders and Disabled Fields

The ::placeholder pseudo-element styles the hint text, and :disabled lets you visually mark fields that are not editable, such as a pre-filled account field.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  input { display: block; width: 240px; margin-bottom: 12px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
  input::placeholder { color: #94a3b8; font-style: italic; }
  input:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
</style>
</head>
<body>
  <input type="text" placeholder="Type here...">
  <input type="text" value="Locked field" disabled>
</body>
</html>

💡

Add font: inherit to inputs, selects, and buttons. Form controls do not inherit the page font by default, so without this they fall back to the browser's own font and look out of place.

Key points

Style inputs with padding, a border, border-radius, and box-sizing: border-box.
Always provide a clear :focus state - never remove the outline without a replacement.
Use attribute selectors like input[type="email"] to target specific field types.
::placeholder styles hint text and :disabled marks non-editable fields.
Add font: inherit so controls match the rest of your page's typography.