Styled text input

Quick implementation

.input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid oklch(0.78 0.02 260);
  border-radius: 0.5rem;
  background: oklch(0.99 0 0);
  color: oklch(0.2 0 0);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder {
  color: oklch(0.65 0.01 260);
}

.input:focus-visible {
  outline: none;
  border-color: oklch(0.55 0.2 260);
  box-shadow: 0 0 0 3px oklch(0.55 0.2 260 / 0.2);
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any LLM to style your form inputs.

Style a text input with CSS using oklch colors. Set font-family: inherit,
0.95rem font-size, 0.6rem/0.75rem padding, a 1.5px solid border in a
light neutral oklch color, and 0.5rem border-radius. Style the ::placeholder
pseudo-element with a muted oklch color. On :focus-visible, remove the
default outline, change the border color to a vivid oklch blue, and add
a 3px spread box-shadow ring at 20% opacity using the same blue.
Add 0.15s ease transitions on border-color and box-shadow.

Why this matters

Default browser input styles are inconsistent across platforms and often clash with custom designs. A well-styled input with a clear focus state improves both aesthetics and usability. The :focus-visible pseudo-class shows the focus ring only for keyboard navigation, keeping mouse interactions clean.

The logic

font-family: inherit ensures the input matches your site's typography — browsers default inputs to system fonts otherwise. The :focus-visible selector fires only when the browser determines focus should be visible (typically keyboard navigation), unlike :focus which fires on every interaction. The box-shadow ring technique creates a soft glow around the input on focus without affecting layout. Transition properties smooth the state change so it feels polished rather than jarring.

Accessibility & performance

Always pair inputs with visible <label> elements — placeholders are not labels. The focus ring must be visible against the page background; the 3px spread with 20% opacity provides a clear indicator. Never use outline: none without providing an alternative focus indicator. Color contrast between the placeholder text and input background should meet at least 3:1 per WCAG. These styles are pure CSS with no layout recalculation on focus — only paint changes via box-shadow.