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

7 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
  4. Selenium server deciphers and converts the check requires into JavaScript commands and delivers them to the visitor.
    Visitor executes the orders employing selenium key and directs results back again to the selenium host
    Selenium host delivers the check leads to the customer selection . For more info on this go here

    ReplyDelete
  5. Everybody have it when it release.i discovered a great deal from this guide but I've several concerns after scanning this ONE. How exactly we can begin it by composing an easy software assume to log-in a credit card applicatoin using selenium automatic device TWO
    . For more info on this visit here

    ReplyDelete