Technology Blog

Partners

WhichIsBest

Ads

ads
WhichIsBest

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

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Nice weblog right here! Also your website rather a lot up very fast! What host are you the usage of Can I am getting your affiliate link in your host I want my site loaded up as quickly as yours lol

    ReplyDelete

WhichIsBest
WhichIsBest