Tuesday, May 1, 2012

Fancy search box form design using CSS, HTML, CSS3


When you are implementing a search box form for your web application, you may wonder how fancy those are in some websites. It's just a simple CSS does the trick and CSS3 adds a little more beauty to the search form.



Consider a HTML search form created using the following code snippet,
<form id="tw-form" action="" method="post">
<input id="tw-input-text" type="text" name="query" value="search" />
<input id="tw-input-submit" type="submit" value="" />
</form>
At first it just looks like a basic HTML form. To make it a beautiful search form design, add the following CSS code snippet either in a external CSS file (or) in the same HTML page within the '<style>...</style>' tag,
#tw-form{
font-family: Tahoma, Geneva, sans-serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: #aaa 1px solid;
background: #DDDDDD;
background: -moz-linear-gradient(top, #C4C4C4 0%, #EAEAEA 0%, #D3D3D3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4C4C4), color-stop(0%,#EAEAEA), color-stop(100%,#D3D3D3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C4C4C4', endColorstr='#D3D3D3',GradientType=0 ); /* ie */
width: 175px;
float: left;
padding: 0 4px;
border-top-left-radius: 4px 4px;
border-top-right-radius: 4px 4px;
border-bottom-right-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;
}
#tw-form #tw-input-text{
width: 145px;
float: left;
border: 0;
background: #DDDDDD;
background: -moz-linear-gradient(top, #C4C4C4 0%, #EAEAEA 0%, #D3D3D3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4C4C4), color-stop(0%,#EAEAEA), color-stop(100%,#D3D3D3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C4C4C4', endColorstr='#D3D3D3',GradientType=0 ); /* ie */
color: #777;
line-height: 100%;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top:3px;margin-bottom:3px;
height:20px;
}
#tw-form #tw-input-text:focus{
outline:none;
color:#333;
}
#tw-form #tw-input-submit{
background: url(search-zoom-icon.png) no-repeat 8px 5px;
border: 0;
float: left;
width: 22px;
z-index: 100;
cursor: pointer;
}

As we have used some CSS3 property also, the design will look different based on the browser support for CSS3.

Anyway the design look different based on CSS3 support, the CSS is written in the way that both the designs looks pretty.

Live Demo | Download Code

1 comment:

  1. People often ask yourself web-designing whether or not selecting a specialist website originator is essential in order to make a regular website for company. The fact remains, most people recommend the item, whereas you will discover people that decide on to manufacture a website on their own.

    ReplyDelete