Create an Expanding Search Input Field Using CSS3

In this tutorial I will be showing you how to create an expanding search field using CSS3 transitions. The search field will simply expand on focus and contract when unfocused. We will also use the CSS3 box-shadow property on focus to give it some more detail and allow the user to be very aware when it is active and inactive when unfocused. There will be two examples in this tutorial. One that expands 100% of the available space and one that expands to a fixed width of 400px. Lets get started!


Assets used in this tutorial:

  • Search Icon

Step 1: Creating the Markup

First we need to create a new index.html file and create some basic HTML markup for the forms.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <title>Expanding Search Input Field Using CSS3 | TutorialBasement</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div id="wrapper">
        <p>Full Width Expanding</p>
        <form id="search-form" name="search-form" method="get" action="index.html">
            <div class="container">
                <input type="text" name="s" id="s" class="search-field-1" placeholder="Search...">
                <input type="submit" name="search-button-1" id="search-button-1" value="">
            </div><!-- end .container -->
        </form>
        <p>Fixed Width Expanding</p>
        <form id="search-form-2" name="search-form-2" method="get" action="index.html">
            <div class="container">
                <input type="text" name="s2" id="s2" class="search-field-2" placeholder="Search...">
                <input type="submit" name="search-button-2" id="search-button-2" value="">
            </div><!-- end .container -->
        </form>
    </div><!-- end .wrapper -->
</body>
</html>

Opening index.html in browser now we will be left with two unstyled forms like this:

Expanding Search Input Field Using CSS3 | Step 1


Step 2: Creating General Styles

Next we need to create a brand new styles.css file and put it in the same directory as our index.html. Then we will create some general styles such as body, the div wrapper and paragraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
  background: #e1e1e1;
  color: #252525;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
}
#wrapper {
  width: 750px;
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 20px;
  border: 1px solid #d7d7d7;
}
p { color: #777; margin-bottom: 20px; }

Opening index.html in browser now you will have this:

Expanding Search Input Field Using CSS3 | Step 2


Step 3: Styling the Search Forms, Container and Search Fields

Next we will set the search forms to display as block and give them a margin bottom of 15px. Then we will give the fields container a position of relative. Finally we will style both the search fields at there normal states.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/** Search Forms and Container **/
#search-form-1, #search-form-2 {
  display: block;
  margin-bottom: 15px;
}
.container { position: relative; }
/** Search Fields **/
.search-field-1, .search-field-2 {
  display: block;
  width: 265px;
  padding: 13px 13px;
  padding-right: 40px; /* Keeps input text from running over the search button */
  background-color: #fff;
  font-size: 14px;
  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: 20px;
  /* 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;
}

Opening index.html now we have our normal state fields:

Expanding Search Input Field Using CSS3 | Step 3


Step 4: Create the Search Field Focus Styles

Next we will style both the search field examples focus states. Only difference here is full width will have a width of 100% while fixed width will have a set width of 400px.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/** Search Field 1 Focus (Full Width) **/
.search-field-1:focus {
  outline: none;
  width: 100%;
  color: #666;
   
  /* 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: 400px;
  color: #666;
  /* 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;
}

Opening index.html now and clicking on the forms we can now see the expanding effect:

Expanding Search Input Field Using CSS3 | Step 4


Step 5: Creating the Search Button Styles

Finally we will style the search buttons normal state and hover states. I’ve applied a 50% opacity to them at normal state and 100% opacity on focus as well as a css3 transition to make a smooth hover effect. Then we need to re-position them on focus.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/** Search Buttons **/
#search-button-1, #search-button-2 {
  background: transparent url('search-icon.png') center left no-repeat;
  position: absolute;
  right: 505px;
  top: 16px;
  height: 16px;
  width: 16px;
  border: 0;
  cursor: pointer;
  /* Set Opacity to 50% on buttons */
  filter: alpha(opacity=50); /* IE */
  opacity: 0.50;
  /* CSS3 Transition */
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
/* Set Opacity to 100% on focus/hover of buttons */
#search-button-1:hover, #search-button-1:focus,
#search-button-2:hover, #search-button-2:focus {
  filter: alpha(opacity=100); /* IE */
  opacity: 1.0;
}
/* Button position on Full Width field after it expands */
.search-field-1:focus + #search-button-1 {
  right: 20px;
}
/* Button position on Fixed Width field after it expands */
.search-field-2:focus + #search-button-2 {
  right: 370px;
}

Final Result:

Expanding Search Input Field Using CSS3 | Final Result

Leave a Reply

Your email address will not be published. Required fields are marked *