In this tutorial, I’d like to explore how you can embellish a simple search form. We won’t be doing anything crazy, instead exploring four different takes on how you can spruce up a search input with the help of CSS transitions.
You Already Have a Basic Search Box
In your HTML file you’ll need to need to create a search input to get started. If you take a look at the code below you’ll notice four different things: a .box div, a .container-1 div, an .icon, and the search input itself.
<div class="box"><div class="container-1"><span class="icon"><i class="fa fa-search"></i></span><input type="search" id="search" placeholder="Search..." /></div></div>
All of the four examples will have a search box – naturally – as well as a looking class icon. Each of the four examples will be housed in a container so that we can manipulate the search input independently. Lastly, the box div is responsible for keeping the container centered.
Adding Font Awesome
Font Awesome is an icon library. You can learn more about the project on Font Awesome’s own website.
<i class="fa fa-search"></i>
The code snippet above is one example of how you can include the icon within your markup. However, in order for the icon to show up you also need to include a link to the Font Awesome library, demonstrated in the snippet below. Include this link within your document head.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Basic Styling
We're now going to add some styles in a separate stylesheet (which you'll also need to link to from within the document head).
body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}In the above CSS snippet we are adding some basic styling to the page. The style of the search boxes will be navy colored so the body background shouldn't be stark white. The box class is also being centered into the page for the sake of the tutorial.
Embellishing the Search Box
This tutorial is all about learning how to embellish the search boxes. In this first example I’ll explain what is going on in greater detail; I want to make sure you know exactly what is going on. In the remaining three examples, I will simply show you how to achieve the various transitions.
#1. Background Fade
The first example we are going to tackle is to change the background of the search input on hover. We will also be adding a transition so that the change isn’t jarring.
The HTML
You’ve already seen the HTML for the basic markup. This snippet will be similar for all the examples.
<div class="box"><div class="container-1"><span class="icon"><i class="fa fa-search"></i></span><input type="search" id="search" placeholder="Search..." /></div></div>
The CSS
In order to start the styling we need to define the CSS style of the search box itself. Let’s add all the various CSS rules one by one so you know exactly what is going on.
.container-1{
width: 300px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}First, we want to style the container class. The most important property is arguably position: relative. This is set specifically so that the icon can be placed on top of the input as you’ll see shortly.
.container-1 input#search{
width: 300px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #63717f;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}Input
Next we want to style the actual input. Everything above is purely aesthetic as the border radius or background colour don’t effect how the input functions. Do make note of the left padding property. It’s there to make room for the icon so that it’s not literally on top of the text within the input.
Below we have four different rules which colour the placeholder text, which in our example is Search. The rules unfortunately need to be separate for the individual vendor prefixes and cannot be consolidated into a shorthand written rule. It’s a little annoying and you’ll see this repeated in every example!
.container-1 input#search::-webkit-input-placeholder {
color: #65737e;
}
.container-1 input#search:-moz-placeholder { /* Firefox 18- */
color: #65737e;
}
.container-1 input#search::-moz-placeholder { /* Firefox 19+ */
color: #65737e;
}
.container-1 input#search:-ms-input-placeholder {
color: #65737e;
}Icon
Lastly, we'll style the icon. Most importantly we are setting its position to be placed on top of the input by setting its position: absolute. Margins help position the icon in addition to setting its top position to 50%.
.container-1 .icon{
position: absolute;
top: 50%;
margin-left: 17px;
margin-top: 17px;
z-index: 1;
color: #4f5b66;
}Adding Hover Effects
The next set of rules we have to create is what happens to the search box on hover. In this example we only want to change the background color. In order to get rid of the yellow or blue glow around the input (which browsers sometimes add) set outline: none.
.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
outline:none;
background: #ffffff;
}As you see in the above snippet, we have added two additional states – focus and active. This way the effect doesn’t disappear when you stop hovering on the input. More importantly, the effect is also prominent when the input is in use.
Creating the Transition
In order to make the transition happen we need to add a few lines of code. Return all the way back to the rule where we defined the style of the input - .container-1 input#search. Before the closing brackets add the following snippet:
-webkit-transition: background .55s ease; -moz-transition: background .55s ease; -ms-transition: background .55s ease; -o-transition: background .55s ease; transition: background .55s ease;
We are defining the transition property shorthand, but we could instead define those three parameters individually. Firstly, we are saying that the transition should only affect the background property. Next, we are saying the transition should take a little over half a second. Lastly, we define the transition effect to be easing. The ease is not the only effect that would work here, we also could have used linear or ease-in, for example. It simply would have looked a bit different. Try it out yourself to see if you like them better.
The input style should now look like the code below.
.container-1 input#search{
width: 300px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #262626;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background .55s ease;
-moz-transition: background .55s ease;
-ms-transition: background .55s ease;
-o-transition: background .55s ease;
transition: background .55s ease;
}How do CSS Transitions Work?
If you don’t know anything about CSS transitions, let me give you a brief overview. First, in order for the transition to work, the property needs to be defined on the default state and not on hover, or on active or on focus.
CSS transitions allow for gradually changing effect and you can define specific parameters to control, such as which property will be affected, the duration of the transition and the kind of transition. You can have multiple transitions set for one element. But, most importantly, you should always include vendor prefixes in order to accommodate the various browsers, as the support for this property is not yet universal.
For more information take a look at: CSS3 Transitions And Transforms From Scratch
#2. Expand Input on Hover
In this example the search will start out as only the looking glass icon. When you hover over the icon, the search will expand at which point you can then type in your query. The majority of the code in this example will be very similar to the previous example.
The HTML
<div class="box"><div class="container-2"><span class="icon"><i class="fa fa-search"></i></span><input type="search" id="search" placeholder="Search..." /></div></div>
The CSS
.container-2{
width: 300px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}The input styling for this transition is different. The input is significantly smaller so that the icon can appear to be behind a square. All of the remaining properties, like background or font color, are the same as we don’t want to change the styling of the search completely.
.container-2 input#search{
width: 50px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #262626;
padding-left: 35px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
-webkit-transition: width .55s ease;
-moz-transition: width .55s ease;
-ms-transition: width .55s ease;
-o-transition: width .55s ease;
transition: width .55s ease;
}As you can also see I’ve redefined the transition property to affect only the width. I’ve kept the time the same because it’s quick enough not to annoy users, yet long enough to create a nice effect.
Below is the code for recoloring the placeholder text.
.container-2 input#search::-webkit-input-placeholder {
color: #65737e;
}
.container-2 input#search:-moz-placeholder { /* Firefox 18- */
color: #65737e;
}
.container-2 input#search::-moz-placeholder { /* Firefox 19+ */
color: #65737e;
}
.container-2 input#search:-ms-input-placeholder {
color: #65737e;
}And once again we have the icon CSS style. It should be the same as in the previous example.
.container-2 .icon{
position: absolute;
top: 50%;
margin-left: 17px;
margin-top: 17px;
z-index: 1;
color: #4f5b66;
}
Adding the Hover Effects
The very last thing we need to do is to define how the search will look like when it's being hovered over. In the snippet below the first rule makes sure that the form doesn’t have the browser-induced glow and that when you are using the input – when typing in it – the search box remains expanded. The middle rule just expands the input to full width on hover.
.container-2 input#search:focus, .container-2 input#search:active{
outline:none;
width: 300px;
}
.container-2:hover input#search{
width: 300px;
}
.container-2:hover .icon{
color: #93a2ad;
}The very last thing happening in the above code is that on hover the icon changes its color. It’s just a small detail to quickly show a user that the search box is active and working, rather than an idle input. The change is not implemented by a transition.
#3. Increasing Icon Size on Hover
Out of all the four examples, this one is the most subtle, both in terms of code and visual effect. In this case the looking glass icon is going to pop up slightly and increase in size.
The HTML
Once again the HTML markup of the icon and the search box is the same as in the previous two examples. The exception, of course, is the .container-3.
<div class="box"><div class="container-3"><span class="icon"><i class="fa fa-search"></i></span><input type="search" id="search" placeholder="Search..." /></div></div>
The CSS
The CSS for this example is nothing special. For the most part it starts out very similar to the first examples where the default state is no different at all. Below is the code for the container and the input. Note that there is no transition on the input this time around.
.container-3{
width: 300px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.container-3 input#search{
width: 300px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #262626;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}Once more we have the placeholder rules.
.container-3 input#search::-webkit-input-placeholder {
color: #65737e;
}
.container-3 input#search:-moz-placeholder { /* Firefox 18- */
color: #65737e;
}
.container-3 input#search::-moz-placeholder { /* Firefox 19+ */
color: #65737e;
}
.container-3 input#search:-ms-input-placeholder {
color: #65737e;
}Now, by the look of it, the icon for this example is the same as well. It’s the same color, the same position and so on. However, I have added a transition to it. These transitions target all properties, which is a shorter approach rather than spelling them out individually.
.container-3 .icon{
position: absolute;
top: 50%;
margin-left: 17px;
margin-top: 17px;
z-index: 1;
color: #4f5b66;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
Adding the Hover Effects
.container-3 input#search:focus, .container-3 input#search:active{
outline:none;
}
.container-3:hover .icon{
margin-top: 16px;
color: #93a2ad;
-webkit-transform:scale(1.5); /* Safari and Chrome */
-moz-transform:scale(1.5); /* Firefox */
-ms-transform:scale(1.5); /* IE 9 */
-o-transform:scale(1.5); /* Opera */
transform:scale(1.5);
}There are a couple of things happening in the above code. Firstly, we are changing the color of the icon on hover and moving it a bit higher so that it’s vertically centered when it’s bigger. Secondly we are adding a transformation to the icon element on hover so that it will in fact be 1.5 times its original size. Because the previously defined transition was set to impact all properties, it appears as if the icon grows in size on hover.
Again, take a look at CSS3 Transitions And Transforms From Scratch to learn more about the transformation property.
#4. On Hover Button
Unlike the last three examples, this one will be more complex. On hover, a button will slide on top of the input to let you proceed – kind of like Send or Go. The button will have the looking glass icon within it.
The HTML
<div class="box"><div class="container-4"><input type="search" id="search" placeholder="Search..." /><button class="icon"><i class="fa fa-search"></i></button></div></div>
Here the HTML is a bit different. The input is still there, of course, but the icon is now inside a button element which comes after the input. It’s important that the button is after the input as it relates to how the hover effect will be created in CSS.
The CSS
The CSS in this example is different so pay attention! Below is the snippet for styling the container. First, position: relative is missing; it’s no longer important as the icon doesn’t rely on it to be placed on top of the input. However, we do have overflow:hidden. This keeps the button from showing up when it’s not on hover. Technically the button that appears is present to the right of the input, but thanks to overflow:hidden it’s not showing when it falls beyond the width of the container – the container and the input are the same width.
.container-4{
overflow: hidden;
width: 300px;
vertical-align: middle;
white-space: nowrap;
}Below the input doesn’t have the transition because it’s not the element being affected this time around.
.container-4 input#search{
width: 300px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #fff;
padding-left: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}The snippet to recolor the placeholders is next.
.container-4 input#search::-webkit-input-placeholder {
color: #65737e;
}
.container-4 input#search:-moz-placeholder { /* Firefox 18- */
color: #65737e;
}
.container-4 input#search::-moz-placeholder { /* Firefox 19+ */
color: #65737e;
}
.container-4 input#search:-ms-input-placeholder {
color: #65737e;
}Below is the code to style the button that appears on hover. The trick to making it slide in from the side is to place it right behind the input, and make it invisible unless on hover. The button is the element that changes - it moves – therefore it’s the one where the transition is defined. To make things simpler, I’ve identified the transition to impact all properties.
.container-4 button.icon{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background: #232833;
height: 50px;
width: 50px;
color: #4f5b66;
opacity: 0;
font-size: 10pt;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
Adding the Hover Effects
In order to fade in the button, it needs to be moved on top of the input. That’s done through the negative margin. Previously we set the opacity of the button to 0 so we have to reset it to 1 in order that the button can be visible too.
The last rule only changes the background of the button if you hover over the button. It’s good to let a user know that the button is active and you can click it to submit the search; there is no point in having a button if it appears inactive.
.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
outline: none;
opacity: 1;
margin-left: -50px;
}
.container-4:hover button.icon:hover{
background: white;
}
Conclusion
Well, that brings us to the end of our CSS experiments! We took a basic search form input and used a small selection of effects to change its behavior. How else would you suggest changing a search input like this? What other aspects of it would you apply CSS transitions or transforms to? Let us know in the comments!