form design

by Imri Paloja

HTML

<form id="search" action="/search.php" method="get">
  <input name="query" size="20" placeholder="search" value="" type="text" id="searchbox">
  <input name="search" value="1" type="hidden">
  <input type="submit" id="add" value="">
</form>

CSS

#search {
    border: 0px solid #CCCCCC;
}

#add {
    background-image: url("http://www.eurobytes.nl/images/search.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-left: 0px none;
    margin-left:-5px;
    width: 35px;
    padding: 2px 3px;
    cursor: pointer;
}

#searchbox {
    padding: 3px 3px;
    border: 1px solid #CCCCCC;
}

#searchbox:active {
    border: 1px solid #3465A4;
}