Diseña tu cuadro de búsqueda con CSS

Hoy presentaré cómo usar imágenes de fondo en CSS para diseñar su cuadro de búsqueda. He usado otros métodos para implementar mi formulario y cuadro de búsqueda antes, pero este método parecía ser más fácil, así que pensé en compartirlo con cualquiera que esté interesado.

Ver demostración

del método original Primero, echemos un vistazo a mi método original de uso de :

método original

En esta versión mejorada del método, decidí no usar type="image" sino usar la etiqueta y luego agregar el fondo usando CSS. Esto permite que los cuadros de entrada de texto y los botones se alineen automáticamente. También agregué una pseudoclase :focus al efecto final (IE no admitirá esto, así que agregué un estilo especial para que IE oculte este efecto). Éstos son algunos de los beneficios de este enfoque:

Alineación natural usando solo una imagen para botones y campos de entrada
La pseudoclase :focus admite navegadores que agregan efectos de desplazamiento a los botones.

HTML

http://www.sohtanaka.com/ ">

Buscar

CSS

conjunto de campos.búsqueda {
borde: ninguno;
ancho: 243px;
margen: 0 automático;
antecedentes: #222;
}
.entrada de búsqueda, botón .búsqueda {
borde: ninguno;
flotador: izquierda;
}
.buscar entrada.box {
color: #fff;
tamaño de fuente: 1,2 em;
ancho: 190px;
altura: 30 píxeles;
relleno: 8px 5px 0;
antecedentes: #616161 URL (search_bg.gif) no repetida;
margen derecho: 5px;
}
.búsqueda entrada.box:enfoque {
fondo: #616161 url (search_bg.gif) sin repetición izquierda -38px;
esquema: ninguno;
}
.botón de búsqueda.btn {
ancho: 38px;
altura: 38px;
cursor: puntero;
sangría de texto: -9999px;
fondo: #fbc900 url(search_bg.gif) no repetir arriba a la derecha;
}
.botón de búsqueda.btn:hover {
fondo: #fbc900 url(search_bg.gif) no repetir abajo a la derecha;
}Comentarios especiales de IE

IE estilo-es decir.css
Un amigo comentó que IE6 e IE7 desplazarían la imagen de fondo horizontalmente si ingresas demasiado texto, por lo que mi enfoque fue usar una imagen de fondo separada específicamente para IE, y en lugar de alinearla a la izquierda, la volteé y alineé el fondo. imagen a la derecha para solucionar este problema.

.buscar entrada.box {
fondo: url(search_bg_ie.gif) no se repite en la parte inferior derecha;
/* Una imagen de fondo independiente específicamente para IE, y esta imagen debe estar alineada a la derecha. ***/
}