In this tutorials you will know how to create css search box and button first we need a label element for accessibility reasons
Read The Full Tutorial.
In this tutorials you will know how to create css search box and button first we need a label element for accessibility reasons
Here is the code we use:
<form action="page.html" method="post">
<div>
<label for="search">Search:</label>
<input id="search" name="search" type="text" />
<input alt="Search" src="img/search.gif" type="image" />
</div>
</form>
The screen reader should pick up. Because this label doubles as the submit button we also don’t have to hide it.
<form id="searchform" action="page.html" method="post">
<div>
<input id="search" name="search" type="text" />
<label for="search"><input title="Search" alt="Search" src="img/search3.gif" type="image" /></label>
</div>
</form>
To style the forum you need use 3 images: left curve, a gradient and the submit button, to add this use css borders on the input box.
Here is the css code:
#searchform div {
/* This div will have the left image as a background */
background: url(search1.gif) no-repeat left top;
padding: 0 10px;
margin: 0;
line-height: 1;
}
#searchform #search {
/* Im going to apply a top and bottom border to this input so that it fits with my images and give it the gradient background */
border-top:2px solid #999;
border-bottom:2px solid #999;
border-left:0;
border-right:0;
background: #fff url(search2.gif) repeat-x top;
padding: 3px 2px 2px 0;
height: 15px;
}
#searchform input {
/* Some reset styles to make my form elements play nice */
vertical-align: top;
margin: 0 !important;
line-height: 1;
outline:0 !important;
}
Add a pixel of padding to the input box:
<!--[if lte IE 7]>
<style type="text/css" media="screen">#searchform #search { position:relative; margin-top:-1px !important; }</style>
<![endif]-->
|
Ajax Projects
