Search box and button : Seach box « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Seach box
Search box and button
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
.search {
background-image: url(images/search_block.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 340px;
float: left;
height: 55px;
margin: 36px 0 0 194px;
}
.search_field {
width: 205px;
height: 15px;
border: 0px;
margin: 12px 8px 0 50px;
float: left;
}
.search_button {
width: 67px;
height: 22px;
background-image: url(images/search.gif);
background-position: top left;
background-repeat: no-repeat;
border: 0px;
margin: 10px 0 0 0;
cursor: hand;
cursor: pointer
}
</style>
</head>
<body>
<div id="header">
<div>
<div class="search">
<form action="#">
<input type="text" class="search_field" />
<input type="submit" class="search_button" value="" />
</form>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category