How To Create Pretty Search Forms

In this tutorial we are going to style text boxes and buttons to create pretty search forms. We are going to create three forms which will match the image above.

The three styles are dark grey, light grey and a lighter grey just like the image below.

Search Boxes

The HTML

Each of the search forms will have a textbox and a button which we can submit the search.

As we are creating three forms everything we do we need to duplicate three times.

<div class="lighter">
<form>
	<span><input type="text" class="search rounded" placeholder="Search..."></span>
	<span><input type="text" class="search square"><input type="button" value="Search"></span>
</form>
</div>
<div class="dark">
<form>
	<span><input type="text" class="search rounded" placeholder="Search..."></span>
	<span><input type="text" class="search square"><input type="button" value="Search"></span>
</form>
</div>
<div class="light">
<form>
	<span><input type="text" class="search rounded" placeholder="Search..."></span>
	<span><input type="text" class="search square"><input type="button" value="Search"></span>
</form>
</div>

Each of the forms have two search boxes, the first search box is a rounded box with default text of Search. All the search boxes will have a CSS class of search this is so we can display a search icon inside the textbox.

The second search box is a rectangle box, this one also has a button next to it which is used to submit the form.

Styling The Forms

First we are going to create the general style which is repeated on all of the above forms.

form{
	width:500px;
	margin:0 auto;
}
.search { 
	padding:6px 15px 6px 30px;
	margin:3px; 
	background: url('./images/search.png') no-repeat 8px 6px; 
}

To start off we center the form in the middle of the page to create the look of the above image. Then we can change the search class to display a background image of a search icon. To make this display correctly we have to change the position of the icon inside the search box. If we are displaying the search icon in the search box then we need to apply a padding to the box so the text doesn't get displayed over the icon.

.rounded { 
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
}

The first search boxes are rounded so we can add a class rounded which will change the border-radius to 15 pixels.

input[type=text]{
	color:#bcbcbc;
}

For all of the textboxes we change the font colour.

input[type=button], input[type=button]:hover {
	position:relative; 
	left:-6px;
	border:1px solid #adc5cf;
	background: #e4f1f9; /* Old browsers */
	background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
	background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
	color:#7da2aa;
	cursor: pointer;
}

The second search boxes have a search button used to submit the form, the position of the search button is next to the textbox so we change the left position to -6px.

.lighter, .light, .dark {
	width:95%;
	height:50px;
	padding:40px 25px;
}

This will setup the main divs which contain the search forms.

The only difference between the search forms is that the containing DIVs have different backgrounds and the textboxes have different borders and background colours.

Lighter Search Form

.lighter{
	background: url('./images/lighter_grey.jpg');
}
.lighter input[type=text]{
	border:1px solid #d0d0d0;
	background-color:#fcfcfc;
}

Light Search Form

.light{
	background: url('./images/light_grey.jpg');
}
.light input[type=text]{
	border:1px solid #acb1b7;
	background-color:#fcfcfc;
}

Dark Search Form

.dark{
	background: url('./images/dark_grey.jpg');
}
.dark input[type=text]{
	border:1px solid #2a2e31;
	background-color:#2d3035;
	color:#505358;
}

View the demo to see the different search forms.

Demo

Keep updated with the latest tutorials and snippets.

Join me on Twitter | G+ | Facebook

Comment