Increase width of search bar in header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Increase width of search bar in header

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <meta name="description" content="NewTemplate"> 
  <!-- Responsive optimized layout !--> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <style>
.ipt {<!-- w ww  .  j a  v a 2  s  .  c  o m-->
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
   border: 0px;
   border-bottom: 1px solid #ccc;
   height: 50px;
   font-size: 25px;
   line-height: 45px;
}
      </style> 
 </head> 
 <body> 
  <a class="navbar-brand page-scroll" href="#page-top">dss</a> 
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
   <ul class="nav navbar-nav navbar-right"> 
    <li> 
     <form class="navbar-form" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control ipt" placeholder="Search" name="q"> 
       <div class="input-group-btn"> 
        <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> 
       </div> 
      </div> 
     </form> </li> 
    <li> <a href="">Test</a> </li> 
    <li> <a href="">About us</a> </li> 
    <li> <a href="">Blog</a> </li> 
   </ul> 
  </div> 
 </body>
</html>

Related Tutorials