Home / Snippets / Color & Theming /

Dark mode form inputs

Stacked labels, helper text, text field, and native select — with a shared focus ring that stays visible on charcoal fills.

Shown in URLs and invoices.

Widely Supported
colorno-js

Quick implementation

.dm-input,
.dm-select {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid oklch(0.42 0.05 265 / 0.65);
  background: oklch(0.2 0.03 265);
  color: var(--text);
}
.dm-input:focus-visible,
.dm-select:focus-visible {
  outline: none;
  border-color: oklch(0.62 0.12 250);
  box-shadow: 0 0 0 3px oklch(0.55 0.12 250 / 0.25);
}

Prompt this to your LLM

Labels, validation hooks, and native controls.

You are styling form controls for a dark dashboard.

Goal: Text input and native select sharing one field shell — label, optional hint, focus ring.

Technical constraints:
- Inputs sit on oklch() fills darker than var(--card); borders use semi-transparent oklch, not pure gray hex.
- :focus-visible uses ring via box-shadow (not outline: none without replacement).
- Select: custom chevron via CSS gradients, appearance: none — keep keyboard usability.

Return HTML + CSS.

Why this matters in 2026

Dark forms fail when placeholders disappear and focus is invisible. Pairing lifted borders with a soft outer ring keeps WCAG focus requirements obvious.

The logic

One .dm-input / .dm-select pair avoids drift between control types. The select chevron is drawn so you are not stuck with OS chrome clashing with tokens.

Accessibility & performance

Every control has a programmatic label for= match. The demo form uses onsubmit="return false" only to prevent navigation in the iframe.