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


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">
	<span><input type="text" class="search rounded" placeholder="Search..."></span>
	<span><input type="text" class="search square"><input type="button" value="Search"></span>
<div class="dark">
	<span><input type="text" class="search rounded" placeholder="Search..."></span>
	<span><input type="text" class="search square"><input type="button" value="Search"></span>
<div class="light">
	<span><input type="text" class="search rounded" placeholder="Search..."></span>
	<span><input type="text" class="search square"><input type="button" value="Search"></span>

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.

	margin:0 auto;
.search { 
	padding:6px 15px 6px 30px;
	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 { 

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


For all of the textboxes we change the font colour.

input[type=button], input[type=button]:hover {
	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 */
	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 {
	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

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

Light Search Form

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

Dark Search Form

	background: url('./images/dark_grey.jpg');
.dark input[type=text]{
	border:1px solid #2a2e31;
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

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