Create Search Form - HTML CSS CSS Form

HTML CSS examples for CSS Form:Form

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. Form

Description

Create Search Form

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.container .form-search .input-append {
   display:block;
   padding-right:100px
}

.input-append input.search-query {
   width:100%
}

.searchbar {<!--  w  ww  . java  2  s.com-->
   background:Chartreuse;
   padding:11px 0;
}

form {
   margin:0;
}

.info {
   background:yellow;
   color:blue;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
  <div class="searchbar"> 
   <div class="container"> 
    <div class="row-fluid"> 
     <div class="span9"> 
      <form class="form-search"> 
       <div class="input-append"> 
        <input type="text" class="search-query"> 
        <button type="submit" class="btn">Lorem </button> 
       </div> 
      </form> 
     </div> 
     <div class="span3 info">
       Lorem ipsum dol 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials