Yes, you can create an animation search bar with CSS only. The key is to use the: focus pseudo-class, transition and reasonable layout to achieve interactive effects. The specific steps are as follows: 1. Build the infrastructure with HTML, including input boxes and optional search icons; 2. Use CSS to set the container centering and set the default style of the input box, including rounded borders, inner margins and transition effects; 3. Define the hover and focus states through the:hover and:focus pseudo-classes, expand the width when focusing, change the border color and add shadows; 4. Optionally add search icons, use absolute positioning or adjacent brother selectors ( ) to trigger animation effects when focusing, such as color changes and displacement; 5. Ensure that the transition time is between 0.3s and 0.5s, keep smooth and without delay, and retain visible focus styles to ensure accessibility. The entire process does not require JavaScript, and relying on CSS can achieve lightweight and efficient animation effects, which are suitable for all modern browsers.

Creating a CSS-only animated search bar is a great way to add subtle interaction to your website without relying on JavaScript. The key is to use focus states, transitions, and pseudo-elements to create smooth visual effects. Below is a step-by-step guide to building a clean, animated search bar using only HTML and CSS.

? Basic Structure (HTML)

Start with a simple input field wrapped in a container:

 <div class="search-container">
  <input type="text" class="search-input" placeholder="Search...">
</div>

? Styling and Animation (CSS)

Here's how to style and animate the search bar:

 .search-container {
  display: flex;
  justify-content: center;
  margin: 50px auto;
  width: 100%;
  max-width: 400px;
}

.search-input {
  width: 60%;
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 25px;
  outline: none;
  transition: all 0.4s ease;
}

/* Hover effect */
.search-input:hover {
  border-color: #999;
}

/* Focus effect – this is where the animation happens */
.search-input:focus {
  width: 80%;
  border-color: #4d90fe;
  box-shadow: 0 0 10px rgba(77, 144, 254, 0.3);
}

? How the Animation Works

• transition: all 0.4s ease;
  This enables smooth changes to width , border , and box-shadow .

• On focus ( :focus )
  The input expands from 60% to 80% width, gets a blue border, and a soft glow. This creates a natural "opening up" effect, drawing attention to the active field.

  

• No JavaScript needed
  The animation is triggered purely by user interaction (focusing the input), handled by CSS pseudo-classes.

Optional Enhancements

You can go further with more advanced CSS effects:

1. Icon Slide-in Animation

Add a search icon that moves into place:

 <div class="search-container">
  <span class="search-icon">?</span>
  <input type="text" class="search-input" placeholder="Search...">
</div>

 .search-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  transition: all 0.3s ease;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 25px;
  outline: none;
  transition: all 0.4s ease;
}

.search-input:focus {
  border-color: #4d90fe;
  box-shadow: 0 0 10px rgba(77, 144, 254, 0.3);
}

.search-input:focus .search-icon {
  color: #4d90fe;
  transform: translateY(-50%) translateX(-5px);
}

Note: The icon must come after the input in the HTML to use the selector. Or use wrapper-based positioning.

Alternatively, reverse the HTML order and use :

 <div class="search-container">
  <input type="text" class="search-input" placeholder="Search...">
  <span class="search-icon">?</span>
</div>

Then update the CSS selector:

 .search-input:focus .search-icon {
  /* styles */
}

? Tips for Better UX

• Keep the transition duration between 0.3s and 0.5s – long enough to notice, short enough to feel snappy.
• Use outline: none only if you're replacing it with a visible focus style (for accessibility).
• Always ensure the focused state is clearly visible for keyboard users.

? Summary

A CSS-only animated search bar relies on:

• The :focus pseudo-class for interaction
• transition for smooth animations
• Smart layout (flexbox or absolute positioning)
• Optional icon effects using sibling selectors

No JavaScript required. It's lightweight, fast, and works across all modern browsers.

Basically just style the focus state with expanding width or color changes, and let CSS do the rest.

The above is the detailed content of How to create a CSS-only animated search bar?. For more information, please follow other related articles on the PHP Chinese website!