🔍 Smooth Expanding Search Bar using only CSS
Published
•2 min read
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! 🚀
