CSS Search Form

Submitted by:Andery Smith

Date added:03 April, 2013

Category:CSS

Nice little search form snippet using HTML and CSS

Tags: search form

Code Snippet:

// HTML Code :

<form id="search_form"><input class="search text_input" type="text" name="query" value="" /> <input class="search_submit" type="submit" /></form>


// CSS Code:

#search_form {
width: 192px;
margin: 0 auto;
margin-bottom: 10px;
}
.search {
display: block;
width: 160px;
height: 30px;
font-size: 18px;
line-height: 30px;
border: none;
float:left;
}
.search:focus {
outline: none;
}
.search_submit {
display: block;
text-indent: -9999px;
width: 30px;
height: 30px;
border: none;
background: white url(images/search.png) no-repeat;
}
 
 

Comments