Todos los que alguna vez tuvimos o tenemos que lidiar con los formularios de búsqueda siempre pensamos que nuevo agregado le podemos añadir para que sea más usable por el usuario pero otras tantas las veces que nos olvidamos en focalizarnos
en el diseño de los mismos y esto es algo que no debemos olvidar.

Es por eso que en este breve y sencillo tutorial, les explicaremos como podemos cambiarle el diseño que viene por defecto:

De acuerdo a esto último estaría todo bien pero se nos presento un inconveniente. La imágen del botón no se encuentra lineado con la casilla de búsqueda y deberia tener un margen superior negativo para corregir este error:

Para corregir esto, a continuación le mostramos la estructura definitiva:

Search

fieldset.search {
	border: none;
	width: 243px;
	margin: 0 auto;
	background: #222;
}
.search input, .search button {
	border: none;
	float: left;
}
.search input.box {
	color: #fff;
	font-size: 1.2em;
	width: 190px;
	height: 30px;
	padding: 8px 5px 0;
	background: #616161 url(search_bg.gif) no-repeat;
	margin-right: 5px;
}
.search input.box:focus {
	background: #616161 url(search_bg.gif) no-repeat left -38px;
	outline: none;
}
.search button.btn {
	width: 38px;
	height: 38px;
	cursor: pointer;
	text-indent: -9999px;
	background: #fbc900 url(search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
	background: #fbc900 url(search_bg.gif) no-repeat bottom right;
}

Para Internet Explorer:

Debemos anexarle una hoja de estilo para internet explorer:

1. Agregando la línea con la hoja de estilo ie.css:

2. Dentro de la hoja de estilo, configuramos los estilos propios para ie:

.search input.box {
background: url(search_bg_ie.gif) no-repeat right bottom; /* Unique Input Box background image specifically for IE, and the background position must be aligned to the right*/
}

El resultado final sería el sig: Demo

Via: sohtanaka blog