Below is a sample of a rounded input field with attached button.
We have gone through several examples provided by other coders and could not find one we liked that was simple and easy to implement. So we modified and joined a few of them together to provide these examples.
Example 1 is based completely on images and div's through the use of id's instead of classes.
ends looking like
Download these three images and then copy and paste the code below to make a nice rounded input + search button field
CSS Section:
<style type="text/css">
#searchField #fieldContainer {
margin: 0px;
padding: 0px;
}
#searchField #fieldContainer #myField{
margin-left:-1px;
margin-top:-1px;
height:27px;
float: left;
background-image: url(./search_middle.png);
background-repeat:repeat;
width: 160px;
color: #666666;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border:none;
background-position: left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
vertical-align:middle;
padding:6px 0px 0px 2px;
}
#searchField #fieldContainer #siteSearch{
height:25px;
width:auto;
overflow:hidden;
float:left;
}
#searchField #fieldContainer #leftCurve {
float: left;
background-image:url(./search_lft.png);
background-repeat: no-repeat;
margin-top:-1px;
width:13px;
height:26px;
background-position: left top;
vertical-align:middle;
border:none;
}
#searchField #fieldContainer #mySearch {
float: left;
background-image: url('/./search_rt.png');
background-repeat: no-repeat;
width:40px;
height:25px;
background-position: left top;
display:block;
margin-left:-3px;
border:none;
overflow:hidden;
border:none;
color:#fff;
font-size:1px;
vertical-align:middle;
}
HTML Section:
<body>
<br><br><br>
<div id="searchField">
<div id="fieldContainer">
<div id="leftCurve"></div>
<form action="http://www.google.com/search">
<div id="siteSearch">
<input type="hidden" name="hl" value="en" />
<input align="middle" type="text" name="q" id="myField"/>
<input type="image" src="/./search_rt.png" border="0" name="sa" value="Search" id="mySearch"/>
</div>
</form>
</div>
</div>
</body>
Example 2 is based on the use of div layers and overlaying the divs on the screen on a percise position this one is not that easy to use with dynamic pages that change content.
