Search box style : Seach box « CSS Controls « HTML / CSS






Search box style

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />

<style type='text/css'>
/* search form */
.searchform {
  background-color: transparent;
  border: none;  
  margin: 0 5px 0 10px; padding: 5px 0 15px 0;  
  width: 190px;  
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
  width: 100px;
  color: #777; 
  height: 18px;
  padding: 2px;  
  border: 1px solid #E5E5E5;
  vertical-align: top;
}
.searchform input.button { 
  width: 60px;
  height: 24px;
  padding: 2px 5px;
  vertical-align: top;
}

</style>



<title>Marketplace</title>

</head>

<body>

<!-- wrap starts here -->
<div id="wrap">
      <h1>Search Box</h1>  
      <form action="#" class="searchform">
        <p>
        <input name="search_query" class="textbox" type="text" />
          <input name="search" class="button" value="Search" type="submit" />
        </p>      
      </form>  

</div>

</body>
</html>

   
    
  








Related examples in the same category

1.Seach box floating right
2.Adding search to the header
3.Search box 2
4.Search box layout
5.Search box at the top
6.Search box inside sidebar
7.Search box bar with image background
8.Search box inside sidebar 3
9.Search box
10.Search box 3
11.Search box with border
12.Search box 4
13.Search box and button
14.Large and wide search box
15.Grey style search box inside left section bar
16.Search box at the top 2