Styling Input Fields and Textareas

With the font reset in place, the next step is the visual treatment: give inputs the same padding, border, and corner radius as the rest of the STO design system. The result should look like the inputs belong to the site — not like browser defaults with a font swap.

width: 100%

The first rule every input needs:

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
}

Without this, text inputs render at a narrow browser-default width — typically around 200px. Setting width: 100% makes each field fill its container (the .form-group div), which means the form layout controls the width, not the browser default.

Because the global box-sizing: border-box reset is in place, width: 100% plus padding stays within the container width rather than overflowing it.

Padding and minimum tap target size

Padding determines how much breathing room the user’s text has inside the field, and how easy it is to click or tap:

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
}

0.75rem vertically (12px at base font size) and 1rem horizontally (16px) is a comfortable minimum. Apple’s Human Interface Guidelines recommend a minimum tap target of 44px — this padding, combined with the text height, meets that threshold.

Border

Replace the browser default border with one that matches the STO palette:

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d8d2c8;
  border-radius: 4px;
}

#d8d2c8 is the STO warm gray — the same color used for card borders elsewhere in the site. border-radius: 4px gives a slight rounding that feels modern without being extreme.

Background color

Inputs default to white on most browsers. Explicitly setting it ensures consistency across operating systems and light/dark themes:

background-color: #ffffff;

The focus state: replacing outline safely

When a user tabs to an input or clicks it, the browser adds an outline to signal keyboard focus. Many stylesheets remove this with outline: none — which is an accessibility failure. Users who navigate with a keyboard or assistive technology rely on visible focus indicators to know where they are on the page.

The correct approach: remove the browser outline and replace it with a custom focus ring that is equally visible:

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #2c4a1e;
  box-shadow: 0 0 0 3px rgba(44, 74, 30, 0.2);
}

0 0 0 3px rgba(44, 74, 30, 0.2) — no offset, no blur, 3px spread creates a halo around the element. The rgba with 0.2 opacity gives a soft, semi-transparent version of the STO green. The border color also shifts to the full green, strengthening the signal.

This pattern — outline: none plus a custom box-shadow ring — is the professional standard. The box-shadow respects border-radius (unlike outline in some older browsers) and gives you full control over the color, size, and opacity.

Transition on focus

Pair the focus state with a transition for a smooth response:

.form-group input,
.form-group textarea,
.form-group select {
  /* ...other properties... */
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

Remember: the transition goes on the default state, not on the :focus rule. This ensures the focus ring fades in when gaining focus and fades out when losing it.

Placeholder text

Style the placeholder text separately from entered text — it should be visually subordinate:

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #5a5a5a;
  font-style: italic;
}

#5a5a5a (mid-gray) is noticeably lighter than #1a1a1a (body text), signaling that placeholder text is instructional, not content.

Textarea-specific rules

Textareas have two unique behaviors to address:

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

resize: vertical allows users to drag the resize handle to make the textarea taller but prevents them from widening it, which would break the form layout. resize: none removes the handle entirely; resize: both is the browser default but allows horizontal resizing.

min-height: 140px ensures the textarea has a usable starting height — tall enough to type a short message without immediately needing to scroll.

The complete input ruleset

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d8d2c8;
  border-radius: 4px;
  background-color: #ffffff;
  color: #1a1a1a;
  font: inherit;
  font-size: 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #2c4a1e;
  box-shadow: 0 0 0 3px rgba(44, 74, 30, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #5a5a5a;
  font-style: italic;
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

Exercise

Style the STO contact form inputs:

1. Add the complete input ruleset above to style.css.

2. Open contact.html in the browser. The Name and Email fields should have a clean border, comfortable padding, and white background.

3. Click into the Name field — the border should shift to #2c4a1e and a green halo should appear around it. Click away — the focus ring should fade out smoothly.

4. Tab through all the form fields using only the keyboard. Every field should show a clear, visible focus indicator when active. Tab to the submit button last — it should also show a focus state (styled in Lesson 03).

5. In DevTools, inspect a focused input. In the Styles panel, look for the :focus rule — you should see border-color and box-shadow applied. The outline: none rule should also be visible, confirming you are replacing (not just removing) the focus indicator.

6. Type something in the textarea — it should be resizable vertically by dragging the bottom-right handle, but not horizontally.

Recap

• width: 100% makes inputs fill their container; box-sizing: border-box ensures padding does not cause overflow.
• Padding of 0.75rem 1rem provides a comfortable touch target and readable text spacing inside the field.
• Set an explicit border and background-color to override browser defaults consistently across operating systems.
• Never use outline: none alone. Replace the browser outline with a custom box-shadow focus ring — this preserves accessibility for keyboard and assistive technology users.
• Define transition on the default state so the focus ring animates in and out smoothly.
• ::placeholder styles the placeholder text; keep it visually distinct (lighter color, italic) from entered text.
• resize: vertical on <textarea> allows height adjustment while preventing layout-breaking horizontal resizing.

Lesson 03 styles buttons and the select dropdown — the trickiest form elements to customize.