Creating a CSS-only Expandable Search Bar on Focus
An expandable search bar is a user interface element that expands when it receives focus and collapses back to its original size when focus is lost. This functionality can be achieved using only CSS, without the need for JavaScript. In this blog post, we will walk through the process of creating a CSS-only expandable search bar step by step, including code samples and comments to explain each part of the code.
Step 1: Create the HTML structure
We will start by creating a simple HTML structure for our expandable search bar. We will use an input element of type ‘search’ wrapped inside a div element with a class of ‘search-bar’.
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable Search Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="search-bar">
<input type="search" class="search-input" placeholder="Search...">
</div>
</body>
</html>Step 2: Style the search bar container
Now, let’s style the search bar container with some basic styles. We will set its position to relative, which will allow us to position the input element inside it using absolute positioning later. We will also give it a border, some padding, and a background color.
/* CSS */
.search-bar {
position: relative;
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
background-color: #f1f1f1;
}Step 3: Style the search input
Next, let’s style the search input element. We will set its width to a small value initially and remove the border and outline to give it a cleaner appearance. We will also use absolute positioning to position it within the search bar container.
/* CSS */
.search-input {
position: absolute;
width: 50px;
border: none;
outline: none;
background-color: transparent;
transition: width 0.4s ease;
}Step 4: Expand the search bar on focus
To make the search bar expand when it receives focus, we will use the :focus pseudo-class to target the search input when it is focused. We will increase its width and change the background color to make it more prominent.
/* CSS */
.search-input:focus {
width: 200px;
background-color: #fff;
}Step 5: Add a focus-out transition
To make the search bar smoothly transition back to its original size when focus is lost, we will add a transition property to the search input’s default state. This will ensure that the search bar animates back to its original size when the user clicks away or presses the ‘Esc’ key.
/* CSS /
.search-input {
/ Add this line to the existing .search-input styles */
transition: width 0.4s ease, background-color 0.4s ease;
}And that’s it! You now have a CSS-only expandable search bar that expands on focus and collapses back to its original size when focus is lost.
Here is the complete CSS code for reference:
/* CSS */
.search-bar {
position: relative;
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
background-color: #f1f1f1;
}
.search-input {
position: absolute;
width: 50px;
border: none;
outline: none;
background-color: transparent;
transition: width 0.4s ease, background-color 0.4s ease;
}
.search-input:focus {
width: 200px;
background-color: #fff;
}To recap, we:
- Created a simple HTML structure with a search input element inside a div container.
- Styled the search bar container using basic CSS styles, including positioning, borders, padding, and background colors.
- Styled the search input element with a small initial width, removed borders and outlines, and positioned it using absolute positioning.
- Expanded the search bar on focus by targeting the :focus pseudo-class and increasing the input element’s width and background color.
- Added a focus-out transition to make the search bar smoothly animate back to its original size when the user clicks away or presses the ‘Esc’ key.
Feel free to experiment with the styles and transitions to create a custom expandable search bar that matches the look and feel of your website.
Conclusion:
In this blog post, we demonstrated how to create a CSS-only expandable search bar that expands when it receives focus and collapses back to its original size when focus is lost. This can be a helpful UI element for saving space on a web page while still providing a user-friendly search experience.