CSS Smooth Expanding Search Bar

Creating modern UI components can be fun and satisfying—especially when you manage to do it without any JavaScript. In this post, I’ll walk you through building a clean, minimal expanding search bar using only HTML and CSS, separated neatly into files for clarity and reusability.

🧱 File Structure

Here's how we’ll structure the files:

project-folder/
├── index.html
├── style.css

📄 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Expanding Search Bar</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="search-container">
    <button class="search-btn">🔍</button>
    <input type="text" class="search-input" placeholder="Search...">
  </div>
</body>
</html>

🎨 style.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #fefbf6;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 10px 10px 44px;
  font-size: 16px;
  background: transparent;
  color: #333;
}

.search-input::placeholder {
  color: #aaa;
}

.search-btn {
  position: absolute;
  left: 4px;
  background: none;
  border: none;
  font-size: 16px;
  color: #f47c3c;
  pointer-events: none;
}

.search-container {
  position: relative;
  width: 40px;
  height: 40px;
  transition: width 0.4s ease;
  border-radius: 21px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0e7db;
}

.search-container:focus-within {
  width: 260px;
  background: #fff8f2;
  border-color: #f4d3b2;
}

✨ Final Words

This simple search bar looks great, works smoothly, and only requires CSS. It’s perfect for light projects or as a starting point for more advanced interactive components. Feel free to tweak the theme colors to match your own branding.

Thanks for reading, and happy coding! 🚀

🔍 Smooth Expanding Search Bar using only CSS

🧱 File Structure

📄 index.html

🎨 style.css

✨ Final Words

Subscribe to my newsletter

Rizal Azky

Rizal Azky