Sample 1

HTML

<form action="/" name="search1" method="post">
	<dl class="search1">
		<dt><input type="text" name="search" value="" placeholder="Search" /></dt>
		<dd><button><span></span></button></dd>
	</dl>
</form>

CSS

dl.search1{
	position:relative;
	background-color:#fff;
	border:1px solid #aaa;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-o-border-radius:6px;
	-ms-border-radius:6px;
	border-radius:6px;
}
dl.search1 dt{
	margin-right:40px;
	padding:8px 0 8px 8px;
}
dl.search1 dt input{
	width:100%;
	height:24px;
	line-height:24px;
	background:none;
	border:none;
}
dl.search1 dd{
	position:absolute;
	top:0;
	right:0;
}
dl.search1 dd button{
	display:block;
	padding:10px;
	background:none;
	border:none;
}
dl.search1 dd button span{
	display:block;
	width:20px;
	height:20px;
	background:url('/images/search.png') no-repeat scroll 0 0;
}

Sample 2

Search

HTML

<form action="/" name="search2" method="post">
	<dl class="search2">
		<dt><input type="text" name="search" value="" placeholder="Search" /></dt>
		<dd><button>Search</button></dd>
	</dl>
</form>

CSS

dl.search2{
	position:relative;
}
dl.search2 dt{
	margin-right:105px;
	padding:8px;
	background-color:#fff;
	border:1px solid #aaa;
}
dl.search2 dt input{
	width:100%;
	height:24px;
	line-height:24px;
	background:none;
	border:none;
}
dl.search2 dd{
	position:absolute;
	top:0;
	right:0;
}
dl.search2 dd button{
	display:block;
	width:100px;
	height:42px;
	color:#fff;
	line-height:40px;
	text-align:center;
	background-color:#f66;
	border:1px solid #c66;
}