In this article you will learn how to create a simple search box using HTML5 placeholder attribute and styling it with CSS to give a realistic shadow effects.

This will be your final result
This will be your final result

HTML/CSS used in this simple tutorial.

html: title, link, body, head, html, div, doctype, form, input, button
css: background-color, background-position, background-repeat, width, height, margin, border-radius, box-shadow, padding, box-sizing, color, border, font-weight, background-size, cursor, outline.

Step 1: rough idea of what you are making.

sketch of what we are working on.
sketch of what we are working on.

Step 2: creating folder and file structure.

file and folder structure
file and folder structure

Step 3:  The HTML.

we will start by creating basic HTML 5 structure and linking style sheet to it with the use of HTML link element.

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

We have provided meta information and title to document we are working on, next we will create a form by adding the following line between <body> element.

<form class="searchbox" action="">
 <input type="search" placeholder="Search" />
 <button type="submit" value="search">&nbsp;</button>
</form>

we have used class selector for Search Box Form element.

 

this is how just html for search box looks like.
this is how just html for search box looks like.

in the above html you can see that we have used input and button element (both of which are inline elements) to create a blank search field and a blank button containing &nbsp; value.

In input element we have used placeholder text as “Search” which disappears when we click on input field because we are using this form as a search form we will define “type” attribute by the value of “search” and hence providing more semantic value to the input element.

Next we use button element defining its type attribute with the value of submit and providing white space content with the value of blank space i.e. &nbsp;.

Before moving to styling just add this line above the form element, i will explain you its significance in next step.

<div id="gradient"></div>

Your completed HTML file should look like this.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>sim</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div id="gradient"></div>
 <form class="searchbox" action="">
  <input type="search" placeholder="Search" />
  <button type="submit" value="search">&nbsp;</button>
 </form>
</body>
</html>

Lets move on to our CSS style sheet linked with this .html file.

Step:4 Adding Styles

We should start by adding background-color and gradient to the body of document.

body{
 background-color:#ede4dc;
}
#gradient{
 width:0;
 height:50px;
 margin:0 auto;
 border-radius:100%;
 -webkit-box-shadow: 0 50px 200px 150px rgba(255, 255, 255, 0.93);
 -moz-box-shadow: 0 50px 200px 150px rgba(255, 255, 255, 0.93);
 box-shadow: 0 50px 200px 150px rgba(255, 255, 255, 0.93);
}

To add gradient we have created div element with id selector of #gradient. Now by selecting this element in CSS:

  • create a block 0 wide and 50 height
  • center the element using margin: 0 auto
  • make the block elliptical by adding border-radius of 100%;
  • to produce gradient effect add box-shadow as shown above which will make a circular gradient like effect spread in all directions.

which happens to make something like this.

Remember that we added that div before form. we used it for gradient effect
Remember that we added that div before form. we used it for gradient effect

 

Add style given below to form element by selecting .searchbox class.

.searchbox{
 background-color:#fffbf8;
 padding:13px;
 width:335px;
 margin:100px auto;
 box-sizing:border-box;
 border-radius:6px;
}

box-sizing property with value of border-box is used to define boundaries of block element to fit the element inside a certain area and pushes border and padding inside the area of the box.

notice: for now we are using single abbreviation in styling properties which works in Google chrome browser and at the end of this tutorial we will extend abbreviation to make in cross browser compatible.

 

form will look something like this.
form will look something like this.

Now use advance selector i.e. input[type="search"] to select input element and adding style to it

input[type="search"]{
 width:250;
 height:30;
 padding:15px;
 border-radius:6px;
 border:none;
 color:#939393;
 font-weight:500;
 background-color:#fffbf8;
}

border:none will remove the borders from the search box

again use advanced selector button[type="submit"] to select button element

button[type="submit"]{
 width:35px;
 height:30px;
 background-image:url(img/search-btn.png);
 background-repeat: no-repeat;
 background-position: 10px 5px;
 background-color:transparent;
 background-size:20px 20px;
 border:none;
 cursor:pointer;
}

cursor:pointer turns default cursor to pointer when it hovers over button element.

styling-button-and-input-element

Step 5: Adding shadows

In this last step you will add shadow to make this design look more realistic.

first add box shadow to the form element

.searchbox{
 background-color:#fffbf8;
 padding:13px;
 width:335px;
 margin:100px auto;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 border-radius:6px;
 box-shadow: 
 0 2px 4px 0 rgba(72, 72, 72, 0.83),
 0 10px 15px 0 rgba(126, 126, 126, 0.12),
 0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset, 
 0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
}

 

shadow added to form element
shadow added to form element

finally adding shadow to input element

input[type="search"]{
 width:250px;
 height:30px;
 padding-left:15px;
 border-radius:6px;
 border:none;
 color:#939393;
 font-weight:500;
 background-color:#fffbf8;
 box-shadow:
 0 -2px 2px 0 rgba(199, 199, 199, 0.55),
 0 1px 1px 0 #fff,
 0 2px 2px 1px #fafafa,
 0 2px 4px 0 #b2b2b2 inset,
 0 -1px 1px 0 #f2f2f2 inset,
 0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
}
adding shadow to input element completing style sheet
adding shadow to input element completing style sheet

Step 6: Making it cross compatible.

First we will add normalize.css which makes all the browsers render all elements more consistently by resetting its styles.

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">

now we will add vender prefix (highlighted):

here is how your final style.css should look like.

body{
 background-color:#ede4dc;
}
#gradient{
 width:0;
 height:50px;
 margin:0 auto;
 border-radius:100%;
 -webkit-box-shadow: 0 50px 200px 150px rgba(255, 255, 255, 0.93);
 -moz-box-shadow: 0 50px 200px 150px rgba(255, 255, 255, 0.93);
 box-shadow: 0 50px 200px 150px rgba(255, 255, 255, 0.93);
}
.searchbox{
 background-color:#fffbf8;
 padding:13px;
 width:335px;
 margin:100px auto;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 border-radius:6px;
 -webkit-box-shadow:
 0 2px 4px 0 rgba(72, 72, 72, 0.83),
 0 10px 15px 0 rgba(126, 126, 126, 0.12),
 0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset, 
 0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
 -moz-box-shadow: 
 0 2px 4px 0 rgba(72, 72, 72, 0.83),
 0 10px 15px 0 rgba(126, 126, 126, 0.12),
 0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset, 
 0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
 box-shadow: 
 0 2px 4px 0 rgba(72, 72, 72, 0.83),
 0 10px 15px 0 rgba(126, 126, 126, 0.12),
 0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset, 
 0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
}
input[type="search"]{
 width:250px;
 height:30px;
 padding-left:15px;
 border-radius:6px;
 border:none;
 color:#939393;
 font-weight:500;
 background-color:#fffbf8;
 -webkit-box-shadow:
 0 -2px 2px 0 rgba(199, 199, 199, 0.55),
 0 1px 1px 0 #fff,
 0 2px 2px 1px #fafafa,
 0 2px 4px 0 #b2b2b2 inset,
 0 -1px 1px 0 #f2f2f2 inset,
 0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
 -moz-box-shadow: 
 0 -2px 2px 0 rgba(199, 199, 199, 0.55),
 0 1px 1px 0 #fff,
 0 2px 2px 1px #fafafa,
 0 2px 4px 0 #b2b2b2 inset,
 0 -1px 1px 0 #f2f2f2 inset,
 0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
 box-shadow:
 0 -2px 2px 0 rgba(199, 199, 199, 0.55),
 0 1px 1px 0 #fff,
 0 2px 2px 1px #fafafa,
 0 2px 4px 0 #b2b2b2 inset,
 0 -1px 1px 0 #f2f2f2 inset,
 0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
}
button[type="submit"]{
 width:35px;
 height:30px;
 background-image:url(img/search-btn.png);
 background-repeat: no-repeat;
 background-position: 10px 5px;
 background-color:transparent;
 -webkit-background-size:20px 20px;
 background-size:20px 20px;
 border:none;
 cursor:pointer;
}
input[type="search"]:focus{
 outline:0;
}

Demo of search-box on codepen.io:

See the Pen Simply Awesome Soft Search Box with tutorial. by nikhil (@nikhil) on CodePen


Feel free to comment below and share this tutorial.