Dark mode input

One search-shaped field: leading magnifier, deep field fill, and a soft outer glow on focus — no JS.

Widely Supported

colorno-js

Quick implementation

.dmi-wrap { position: relative; }
.dmi-wrap svg { position: absolute; left: 0.75rem; pointer-events: none; }
.dmi-input {
  padding-left: 2.35rem;
  background: oklch(0.19 0.03 265);
  border: 1px solid oklch(0.4 0.05 265 / 0.7);
  border-radius: var(--radius);
}
.dmi-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.55 0.12 250 / 0.28);
}

Prompt this to your LLM

Search field, icon, and a11y.

You are styling a dark-theme search input.

Goal: type="search" with a decorative magnifier on the left, keyboard-accessible focus ring.

Technical constraints:
- Icon must not steal focus (pointer-events: none); label is visually hidden but associated with for/id.
- Field fill is darker than var(--card); border uses oklch with alpha.
- Use :focus-visible for the ring, not :focus alone on mouse if you add both.

Return HTML + CSS.

Why this matters in 2026

Search is the fastest path through dense UIs. A purpose-built dark field reads sharper than reusing a light-theme input with inverted colors.

The logic

Padding-left reserves space for the icon; absolute positioning keeps the tap target one continuous rectangle for touch and screen readers.

Accessibility & performance

type="search" exposes a clear role; SVG is aria-hidden. No layout thrash — single box-shadow on focus.