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 :
Esto se ve bien, pero tiene un inconveniente. El botón de imagen no se alinea con el cuadro de búsqueda. Tuve que usar un atributo de margen superior negativo para corregir este error.método original
En esta versión mejorada del método, decidí no usar type="image" sino usar la etiqueta
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
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. ***/
}