A, reference url: http://www.kuhnsjewelers.com
2, effect:
  Three, HTML

 code is as follows: 


<Div id="search - box" >
<Asp: TextBox ID="txtSearch" runat="server" class="searchTextBox/>"
<Asp: Button ID="btnSubmit" runat="server" class="submitButton" Text="Search"/>
</div> Four,

CSS

 code is as follows: 


# search - box
{
position: relative;
float: left;
width: 265 px;
height: 55 px;
background: url (Images/search - bg. GIF) top right no - repeat;

} searchTextBox
{
position: relative;
float: left;
margin - top: 14 px;
margin - right: 14 px;
the padding: 5 px 5 px 0 px;
height: 22 px;
width: 141 px;
border: 1 px solid # 000;
background: # 915735;
margin - left: 14 px;
color: # fdf086;

} submitButton
{
position: relative;
height: 29 px;
margin - top: 14 px;
width: 70 px;
background: # D2B277;
border: 1 px solid # 3 e1210;
letter - spacing: 1 px;
text - transform: uppercase;
cursor: pointer;
the font - size: 11 px;

} submitButton: hover
{
text - decoration: underline;
}

instructions:
1, the text box is precompiled then " Type=" Text" The label of the input, the code is as follows:

 code is as follows: 


<TxtSearch txtSearch input name="" id=" "class=" searchTextBox "type=" text ">

2, the size of the text box and div, box model are shown:
 
3, button is label after the precompiled type=" Submit" The label of the input

 code is as follows: 


<The input name="btnSubmit" value="http://www.jb51.net//css/Search" id="btnSubmit" class="submitButton" type="submit" >

4, buttons, the width and height is including the borders, set in the CSS width: 70 px; Height: 29 px; Model, the actual box as shown:


This concludes the body part