Have you ever seen an expanding search box? If you haven’t, don’t fret. It’s still a relatively new feature in the world of web design.
The expanding search box is simply a search box that gets wider as soon as you click on it or type something in it.
It’s a very useful feature to have if you want a clean look for your website. The search box will be obscure until you actually need it. This leaves some room for more important elements of your website, like text or links. We put together an easy step-by-step tutorial so you can add an expanding search bar to your website using CSS! Let’s check it out.
1. Create a HTML markup in your index.html file.
Open your index.html file (or if you don’t have one, create one) and add the following code to it:
<!DOCTYPE html>
<html>
<head>
<title>Expanding Search Input Field</title>
<link rel=”Stylesheet” href=”styles.css”>
<meta charset=”utf-8″>
</head>
<body>
<div id=”wrapper”>
<h2>Full Width Expanding</h2>
<form id=”search-form” name=”search-form” method=”get” action=”index.html”>
<input id=”s” type=”text” name=”s” placeholder=”Search…”>
<input id=”search-button-1″ type=”submit” name=”search-button-1″>
</form>
<h2>Fixed Width Expanding</h2>
<form id=”search-form-2″ name=”search-form-2″ method=”get” action=”index.html”>
<input id=”s2″ type=”text” name=”s2″ placeholder=”Search…”>
<input id=”search-button-2″ type=”submit” name=”search-button-2″>
</form>
</div>
</body>
</html>
If you open your index.html file in your browser, you’ll see a search bar that doesn’t seem to change at all. Don’t freak out! We’ll fix this later.
2. Style the search bar.
Now, go to your style.css file (if you don’t have one, create one – make sure it’s in the same directory as your index.html file). This is when you tweak the way you want your search bar to look in terms of color, font, and border. Add the following code to your style.css file:
body {
background: #FFFFFF;
color: #252525;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 18px;
}
#wrapper {
width: 700px;
margin: 35px auto;
padding: 10px;
background: white;
border-radius: 10px;
border: 1px solid #252525;
}
p { color: #777; margin-bottom: 20px; }
Play around with the numbers and codes until you get the look you want.
Next, set the search forms to display as block and add a relative position to the fields container. This will help keep the search bar consistent before and after expanding. Add the following code to your style.css file:
/** Search Forms and Container **/
#search-form-1, #search-form-2 {
display: block;
margin-bottom: 10px;
}
.container { position: relative; }
/** Search Fields **/
.search-field-1, .search-field-2 {
display: block;
width: 250px;
padding: 10px 10px;
padding-right: 30px; /* Keeps input text from running over the search button */
background-color: #fff;
font-size: 12px;
color: #ccc;
border: 4px solid #f4f4f4;
/* CSS3 Box Sizing */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 Rounded Corners */
border-radius: 10px;
/* CSS3 Transition (Expanding Effect) */
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
3. Add elements to the full width and the fixed width.
Now, this is where the real action begins! Add elements to both the search bar’s full width (after expanding) and fixed width (before expanding). Add the following code to your style.css file and tweak it to suit your preferences:
/** Search Field 1 Focus (Full Width) **/
.search-field-1:focus {
outline: none;
width: 100%; // full width ALWAYS has to be 100%
color: #252525;
/* CSS3 Outer Shadow */
-webkit-box-shadow: 0 0 0 10px #999;
-moz-box-shadow: 0 0 0 10px #999;
box-shadow: 0 0 10px #999;
}
/** Search Field 2 Focus (Fixed Width) **/
.search-field-2:focus {
outline: none;
width: 300px; // change this to adjust the size you want your fixed width to be
color: #252525;
/* CSS3 Outer Shadow */
-webkit-box-shadow: 0 0 0 10px #000;
-moz-box-shadow: 0 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
And that’s all you need to do! At this point, you should have a fully functioning expanding search bar!
This guest post was written by Simon, who is working for Jangomail a mass e-mail service provider. You can check out more of Simon’s work at his personal blog: http://simonsblogpark.com/personal/.