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 <input type="image" src="image_url" />:
<form method="get" id="searchform" action=" http:/ / www.sohtanaka.com/ ">
<conjunto de campos>
<tipo de entrada="texto" valor="" nombre="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Buscar" class="btn" />
</conjunto de campos>
</form>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 <button> 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
<formulario método="obtener" id="formulario de búsqueda" acción=" http://www.sohtanaka.com/ ">
<conjunto de campos clase="búsqueda">
<tipo de entrada="texto" clase="cuadro" />
<button class="btn" title="Enviar búsqueda">Buscar</button>
</conjunto de campos>
</form>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
<!--[if lte IE 7]>
<enlace rel="hoja de estilo" tipo="texto/css" href="es decir.css" />
<![endif]-->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. ***/
}