The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Build an animated search bar with a real, labeled search input, a semantic search region, and a restrained focus animation. The CSS below changes the field’s appearance; the form’s action determines where a submitted query goes. If you want to search or filter content on the current page, you will need to add JavaScript behavior.
What this search bar does—and does not do
This example is a working HTML form that submits a query to a search endpoint you choose. Its animation is purely visual: it expands the field when focused and gives the submit button a small color change. It does not search a site by itself, and it does not filter page content.
Replace /search in the form’s action with the URL your site uses to process searches. The example sends the query using the conventional q parameter. Your site’s endpoint must support that parameter, or you must change the input’s name to match the endpoint.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Add the semantic HTML form
Place this markup where the search bar should appear. The <search> element identifies a search region, and the visible label gives the input a clear accessible name. The placeholder is only a hint; it is not a substitute for the label.
#1 Best Overall
<search class="site-search">
<form action="/search" method="get">
<label class="visually-hidden" for="site-search-input">Search this site</label>
<input
id="site-search-input"
class="site-search__input"
type="search"
name="q"
placeholder="Search this site"
>
<button class="site-search__button" type="submit" aria-label="Submit search">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="10.8" cy="10.8" r="6.3"></circle>
<path d="m15.5 15.5 4.2 4.2"></path>
</svg>
</button>
</form>
</search>The icon is decorative and hidden from assistive technology; the button’s accessible name explains its action. If your design can accommodate visible text, use a visible label instead of visually hiding it. On a page with multiple search regions, give each input a unique id and connect its label to that ID.
Style and animate the bar with CSS
Add the following CSS. The field grows slightly when it receives keyboard or pointer focus. The transition is short and limited to width and border color, rather than a continuous animation.
Rank #2
.site-search {
--search-accent: #2857d9;
max-width: 28rem;
}
.site-search form {
display: flex;
align-items: stretch;
gap: 0.5rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.site-search__input {
box-sizing: border-box;
width: 15rem;
min-width: 0;
padding: 0.75rem 0.9rem;
border: 2px solid #737985;
border-radius: 0.5rem;
color: #17191f;
background: #fff;
font: inherit;
transition: width 180ms ease, border-color 180ms ease;
}
.site-search__input:focus {
width: min(22rem, 70vw);
border-color: var(--search-accent);
outline: 3px solid color-mix(in srgb, var(--search-accent) 25%, transparent);
outline-offset: 2px;
}
.site-search__button {
display: inline-grid;
place-items: center;
width: 3rem;
min-width: 3rem;
border: 0;
border-radius: 0.5rem;
color: #fff;
background: var(--search-accent);
cursor: pointer;
transition: background-color 180ms ease;
}
.site-search__button:hover {
background: #1c3fa7;
}
.site-search__button:focus-visible {
outline: 3px solid #17191f;
outline-offset: 3px;
}
.site-search__button svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
@media (prefers-reduced-motion: reduce) {
.site-search__input,
.site-search__button {
transition: none;
}
}The prefers-reduced-motion media feature detects when someone has enabled a device setting to minimize nonessential motion. This example removes its transitions in response. MDN explains this preference in its reduced-motion reference; its animation guidance also advises considering a way to pause or disable motion. Because this animation runs only in response to focus and stops when focus leaves, there is no perpetual animation to pause. If you adapt the design to run continuously, add an appropriate pause or disable control as well as honoring the reduced-motion preference.
Connect the form to the search behavior you need
Submit a query to a site search endpoint
With method="get", submitting a query sends it in the URL. For example, an endpoint that accepts q may receive a URL such as /search?q=accessibility. Set action to the actual endpoint and confirm the expected parameter name; changing the field’s styling does not configure the server-side search.
Filter content on the current page
A form submission alone does not filter an existing list of cards or results. For that behavior, JavaScript must read the input value, compare it with the page content, and update what is displayed. The exact implementation depends on the content and filtering rules; this example does not include that script.
Use an animated visual without submission
If the field is only a visual mockup, do not present it as a functioning search feature. A CSS transition can provide the appearance of interaction, but a search requires either a configured destination or code that performs the search.
Quick Recap
Best Value
- Used Book in Good Condition
Check the result before publishing
- Submit a test query and verify that the resulting URL and search results match the endpoint’s expected parameter.
- Use the keyboard to reach the input and button; confirm their focus indicators remain visible.
- Check that the input has a label, the button has an accessible name, and the icon is treated as decorative.
- Enable the operating system’s reduced-motion preference and confirm the transitions are removed.
- Test the layout at narrow widths. If the input’s focused width causes overflow, reduce its base width or adjust the focus width for smaller screens.
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.
