Quick implementation
.search-wrap {
position: relative;
}
.search-wrap svg {
position: absolute;
left: 0.875rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: oklch(0.5 0.02 260);
pointer-events: none;
}
.search-field {
width: 100%;
padding: 0.625rem 1rem 0.625rem 2.5rem;
background: oklch(0.13 0.02 260);
border: 1px solid oklch(0.25 0.02 260);
border-radius: 0.5rem;
color: oklch(0.93 0.01 260);
font-family: inherit;
font-size: 0.9rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-field:focus {
outline: none;
border-color: oklch(0.72 0.19 265);
box-shadow: 0 0 0 3px oklch(0.72 0.19 265 / 0.25);
}Prompt this to your LLM
Includes role, constraints, and edge cases to handle.
You are a senior frontend engineer building a search component.
Goal: A search input with a magnifying glass icon and animated focus state.
Technical constraints:
- Position the icon absolutely inside the input wrapper.
- Add left padding to the input to prevent text from overlapping the icon.
- On focus, animate the border color and add a box-shadow ring using oklch() colors.
- Remove the default browser outline and replace it with your custom focus ring.
- Use type="search" and add an aria-label for accessibility.
- Set pointer-events: none on the icon so clicks pass through to the input.
Edge cases:
- Safari adds default search input styling — reset with appearance: none if needed.
- The clear button (×) in some browsers needs styling or hiding via ::-webkit-search-cancel-button.Why this matters in 2026
Search inputs are on nearly every page, yet most developers ship them unstyled or with inconsistent focus states. A well-designed search bar communicates interactivity through its icon, guides focus with a visible ring, and respects dark mode. The technique of absolutely positioning an icon inside a relative wrapper is a pattern you'll use for every input that needs an icon — emails, passwords, URLs.
The logic
The wrapper is position: relative, making it the positioning context for the icon. The SVG icon is position: absolute with top: 50% and transform: translateY(-50%) for perfect vertical centering. pointer-events: none on the icon ensures clicks land on the input. The input's left padding (2.5rem) prevents typed text from hiding behind the icon. On :focus, the border changes color and a semi-transparent box-shadow ring expands outward.
Accessibility & performance
Using type="search" gives screen readers semantic context — they announce it as a search field. The aria-label provides a text label when there's no visible <label> element. The focus ring is essential for keyboard users — never remove :focus styles without replacing them. Zero performance concern: we're only transitioning border-color and box-shadow, both composited.