Tuesday, May 6, 2014

FREEBIE: KLAUS SEARCH BOX

Leave a Comment

The Klaus search box is written in pure CSS so there's no need to download anything. And because it's purely CSS, this search box is fully customizable. You can change the size, the style and thickness of the border, the color and the text of the search button and everything else.
The codes for the first search box:
 <style>    
  #search-btn1 {   
  background:#3d3d3d;   
  color:#ffffff   ;   
  font: 'trebuchet ms', trebuchet;   
  padding:10px 20px;   
  border:0 none;   
  font-weight:bold;   
  }   
  #search-box1 {   
  background: #f3f3f3;   
  padding:10px;   
  border:0 none;   
  width:180px;   
  }   
  </style>   
  <form id="searchthis1" action="/search" style="display:inline;" method="get">   
  <input id="search-box1" name="q" size="40" type="text" placeholder=" Search Tweak Peek"/>   
  <input id="search-btn1" value="Search" type="submit"/>   
  </form>   
If you want it with rounded corners like in the second image, add these lines before each closing bracket.
 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 7px;  
Happy coding!

0 comments:

Post a Comment