Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →You can animate a search bar with CSS, but the animation alone does not make it search. The example below includes a labeled search form that submits a query to a site endpoint; change the form’s action to your own search URL. Its focus animation is decorative, and it reduces that motion for visitors who request reduced motion.
What this search bar does—and what you need to change
This is a front-end form with an animated visual state. When submitted, it sends the entered query as a GET parameter named q to the URL in the form’s action. The sample uses /search as a placeholder endpoint, so it will only produce search results if your site implements that route and accepts that parameter.
As an Amazon Associate I earn from qualifying purchases.
CSS controls the appearance, not the search itself. If your site uses a different query parameter or URL pattern, update the form accordingly. If you want to filter content on the current page instead, you will need JavaScript to read the input and filter that content.
Build the search form
The form uses the native <search> landmark, a real search input, and a visible label. The label remains available to assistive technology and gives all users a clear name for the field; the placeholder is only an example query, not a replacement for that label. MDN documents both the native search element and the search input type.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<search>
<form class="search-form" action="/search" method="get">
<label class="search-label" for="site-query">Search this site</label>
<input
class="search-input"
id="site-query"
name="q"
type="search"
placeholder="Try a keyword"
>
<button class="search-button" type="submit">
<span aria-hidden="true">⌕</span>
<span>Search</span>
</button>
</form>
</search>The icon is decorative, so it is hidden from assistive technology; the button’s text supplies its accessible name. Keep the button text visible or provide an equivalent accessible name if you redesign it as an icon-only control.
Add the focus animation and reduced-motion behavior
This CSS expands the input when the form receives keyboard focus or pointer interaction. The transition is short and tied to the user’s interaction rather than running continuously. MDN describes prefers-reduced-motion as a way to detect when a user has enabled a device setting to minimize nonessential motion.
.search-form {
display: flex;
align-items: center;
gap: 0.5rem;
max-width: 32rem;
padding: 0.5rem;
border: 1px solid #8a94a6;
border-radius: 999px;
background: #fff;
}
.search-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.search-input {
box-sizing: border-box;
flex: 1 1 12rem;
min-width: 8rem;
padding: 0.75rem 1rem;
border: 0;
border-radius: 999px;
font: inherit;
transition: flex-basis 220ms ease, background-color 220ms ease;
}
.search-input:focus {
flex-basis: 20rem;
background: #f0f4ff;
}
.search-form:focus-within {
outline: 3px solid #3157c8;
outline-offset: 3px;
}
.search-button {
padding: 0.7rem 1rem;
border: 0;
border-radius: 999px;
background: #193b9b;
color: #fff;
font: inherit;
cursor: pointer;
}
.search-button:focus-visible {
outline: 3px solid #111;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.search-input {
transition: none;
}
}The label is visually hidden here to keep the compact pill shape; remove the clipping styles if you want it displayed above or beside the input. The focus outline remains visible so keyboard users can track their position. W3C WAI describes the reduced-motion media query as one technique for preventing motion, while noting that its techniques are examples rather than the only way to meet accessibility guidelines: WAI technique C39.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose an animation that fits the interaction
- Focus-triggered transition: useful when you want a compact field to expand only while someone interacts with it, as in this example.
- Always-running keyframes: can draw attention, but they keep moving without user input. Avoid unnecessary continuous movement; provide a pause or disable control if it is essential to the experience. MDN’s animation reference advises considering a way to pause or disable animations.
- JavaScript-controlled behavior: appropriate when the search must filter results dynamically or when animation depends on application state. It adds behavior beyond CSS and should not replace form submission unless that is intentional.
Reduced-motion styling and an animation pause control address related but different situations: the media query respects a device preference, while a control lets a user stop motion directly. For a short focus transition, the reduced-motion rule shown above removes the transition altogether.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Check the result before publishing
- Replace
/searchwith your site’s actual search endpoint and confirm it accepts the parameter namedq. - Submit a query with the keyboard and with the button. Verify the browser navigates to a results page that uses the entered term.
- Use the Tab key to reach the input and button. Confirm the focus outline is visible and that the label and button have clear accessible names.
- Turn on your operating system’s reduced-motion preference, reload the page, and verify the input no longer animates.
- If you add continuous or longer-running motion, include a way to pause or disable it rather than relying only on the operating-system preference.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
