This is a really simple tutorial on creating an expanding suggestion search box build with use of Pure CSS.

 

final result searchbox suggestions
final result of this tutorial
sketch rough idea
sketch of what we are working on
searchbox folder structure
file and folder structure for our search box

 The HTML

First we will create a basic HTML5 structure and then linking a style sheet i.e style.css and normalize.css ( for making styling of HTML consistent across all the browser ).

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>suggestion search box</title>
 <link rel="stylesheet" href="normalize.css">
 <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Next we will add the following lines of code between body element to make search box along with suggestions.

<form class="searchbox" action="">
 <input type="search" placeholder="search.." />
 <ul class="suggestions">
 <li><a href="#">10 Flat Designs that can chan...</a></li>
 <li><a href="#">Download Flat design search...</a></li>
 <li><a href="#">How Flat Design can make y...</a></li>
 <li><a href="#">Why Flat Design is future tre...</a></li>
 </ul>
 </form>

we will use class selector for searchbox and unordered list element.

 

html bones structure
this is how unstyled search box will look like

in the above HTML we have used input element to create blank search field with placeholder text as “search…” and “type” attribute as “search”.

Next we have added unordered list which will be used as suggestions for Search field. This list element would be hidden by default and will be visible when user clicks inside input search field.

now your complete HTML file should look something like this:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>suggestion search box</title>
 <link rel="stylesheet" href="normalize.css">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <form class="searchbox" action="">
 <input type="search" placeholder="search.." />
 <ul class="suggestions">
 <li><a href="#">10 Flat Designs that can chan...</a></li>
 <li><a href="#">Download Flat design search...</a></li>
 <li><a href="#">How Flat Design can make y...</a></li>
 <li><a href="#">Why Flat Design is future tre...</a></li>
 </ul>
 </form>
</body>
</html>

Now lets style the above HTML.

The CSS

First and foremost lets define the width of search box and position it in center of webpage by giving it margin auto.

body{
/*changing background color*/
 background-color:#ebebeb;
}
.searchbox{
/*definint width of form element*/
 width:350px;
/*centering the form element*/
 margin:100px auto;
}

 

sizing the form element and setting body background
centering and sizing the form element

add the code below to style input search field.

input[type="search"]{
 padding:10px 15px 10px 50px;
 font-size:36px;
 color:#1f5350;
/*removing boder from search box*/
 border:none;
/*defining background image as a search symbol*/
 background-image:url(img/search-btn.png);
 background-repeat:no-repeat;
/*background-size*/
-webkit-background-size:35px 35px;
 -moz-background-size:35px 35px;
 -o-background-size:35px 35px;
 background-size:35px 35px;
/*positioning background image*/
 background-position:8px 12px;
/*changing background color form white*/
 background-color:#7accc8;
}

/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/

input[type="search"]::-webkit-input-placeholder{
 color:#b1e0de;
}
input[type="search"]:-moz-placeholder { /* Firefox 18- */
 color: #b1e0de;
}
input[type="search"]::-moz-placeholder { /* Firefox 19+ */
 color: #b1e0de;
}
input[type="search"]:-ms-input-placeholder { /* interner explorer*/
 color: #b1e0de;
}

in this code we started by adding some padding, font-size, font-color and removing border from the search field, and then using background property to place a search icon at the beginning of search field and adding background color.

we also used the input-placeholder pseudo class selector to change the color of placeholder “search…”.

 

styling-the-search-field
adding styles to search field

add the following code to style the list items.

a{
 display:block;
/*removing underlines from anchor element*/
 text-decoration:none; 
 color:#1f5350;
 font-size:30px;
 background-color:#ace5e2;
 padding:10px;
}
ul{
 width:465px;
/*removing predefined bullet points from list*/
 list-style:none;
/*removing padding from list items*/
 padding:0;
}
ul li{
 margin-bottom:10px;
}
styling the list items
styling the suggestion list items

we should add some effect to the list element when hovered over to do this we will add the following code.

/*adding effect when the mouse is hovered over list item*/
.searchbox ul li a:hover{
 color:#b23b61;
 background:#ecd1da;
}
/*moving it slightly toware right when hovered*/
.searchbox ul li:hover{
/*transform*/
-webkit-transform:translateX(20px);
 -moz-transform:translateX(20px);
 -ms-transform:translateX(20px);
 -o-transform:translateX(20px);
 transform:translateX(20px);
}

 

effect when list item is hovered by user
effect when list item is hovered

now we have to add functionality to the search box, the suggestions should be hidden by default and must reappear when user clicks (focus) inside search box with some slow transition.

/*now first we will hide the suggestion list*/
.suggestions li{
 overflow:hidden;
 height:0;
 -webkit-transition:all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -o-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
/*and make the suggestion reappear when user focus on search field*/
input[type="search"]:focus + .suggestions li{
 height:63px;
}

Final complete CSS:

body{
/*changing background color*/
 background-color:#ebebeb;
}
.searchbox{
/*definint width of form element*/
 width:350px;
/*centering the form element*/
 margin:100px auto;
}
input[type="search"]{
 padding:10px 15px 10px 50px;
 font-size:36px;
 color:#1f5350;
/*removing boder from search box*/
 border:none;
/*defining background image as a search symbol*/
 background-image:url(img/search-btn.png);
 background-repeat:no-repeat;
/*background-size*/
-webkit-background-size:35px 35px;
 -moz-background-size:35px 35px;
 -o-background-size:35px 35px;
 background-size:35px 35px;
/*positioning background image*/
 background-position:8px 12px;
/*changing background color form white*/
 background-color:#7accc8;
}
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
input[type="search"]::-webkit-input-placeholder{
 color:#b1e0de;
}
input[type="search"]:-moz-placeholder { /* Firefox 18- */
 color: #b1e0de;
}
input[type="search"]::-moz-placeholder { /* Firefox 19+ */
 color: #b1e0de;
}
input[type="search"]:-ms-input-placeholder { /* interner explorer*/
 color: #b1e0de;
}
a{
 display:block;
/*removing underlines from anchor element*/
 text-decoration:none; 
 color:#1f5350;
 font-size:30px;
 background-color:#ace5e2;
 padding:10px;
}
ul{
/*removing predefined bullet points from list*/
 list-style:none;
/*removing padding from list items*/
 padding:0;
 width:465px;
}
ul li{
 margin-bottom:10px;
}
/*adding effect when the mouse is hovered over list item*/
.searchbox ul li a:hover{
 color:#b23b61;
 background:#ecd1da;
}
/*moving it slightly toware right when hovered*/
.searchbox ul li:hover{
/*transform*/
-webkit-transform:translateX(20px);
 -moz-transform:translateX(20px);
 -ms-transform:translateX(20px);
 -o-transform:translateX(20px);
 transform:translateX(20px);
}
/*now first we will hide the suggestion list*/
.suggestions li{
 overflow:hidden;
 height:0;
 -webkit-transition:all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -o-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
/*and make the suggestion reappear when user focus on search field*/
input[type="search"]:focus + .suggestions li{
 height:63px;
}

Demo of search box:

See the Pen Suggestion Search Box with Pure CSS by nikhil (@nikhil) on CodePen

This makes out simple basic tutorial of search box complete if you have some questions regarding the above tutorial please comment below, i will try to make sure that you got this tutorial right.