Hoje vou apresentar como usar imagens de fundo em CSS para projetar sua caixa de pesquisa. Já usei outros métodos para implementar meu formulário e caixa de pesquisa antes, mas esse método parecia ser mais fácil, então pensei em compartilhá-lo com qualquer pessoa interessada.
Veja a demonstração
do método original Primeiro, vamos dar uma olhada no meu 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>
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />
</fieldset>
</form>Isso parece bom, mas há uma desvantagem: o botão de imagem não está alinhado com a caixa de pesquisa. Tive que usar um atributo de margem superior negativa para corrigir esse bug.
método original
Nesta versão melhorada do método, decidi não usar type="image" mas sim usar a tag <button> e depois adicionar o fundo usando CSS. Isso permite que caixas e botões de entrada de texto sejam alinhados automaticamente. Também adicionei uma pseudoclasse :focus ao efeito final (o IE não suportará isso, então adicionei um estilo especial para o IE ocultar esse efeito). Aqui estão alguns benefícios desta abordagem:
Alinhamento natural usando apenas uma imagem para botões e campos de entrada
A pseudoclasse :focus suporta navegadores que adicionam efeitos de foco aos botões.
HTML
<form method="get" id="searchform" action=" http://www.sohtanaka.com/ ">
<fieldset class="pesquisar">
<input type="text" class="box" />
<button class="btn" title="Enviar pesquisa">Pesquisar</button>
</fieldset>
</form>CSS
fieldset.search {
fronteira: nenhuma;
largura: 243px;
margem: 0 automático;
histórico: #222;
}
Entrada .search, botão .search {
fronteira: nenhuma;
flutuar: esquerda;
}
.pesquisa entrada.box {
cor: #fff;
tamanho da fonte: 1,2em;
largura: 190px;
altura: 30px;
preenchimento: 8px 5px 0;
plano de fundo: #616161 url(search_bg.gif) sem repetição;
margem direita: 5px;
}
.search input.box:focus {
plano de fundo: #616161 url(search_bg.gif) sem repetição à esquerda -38px;
esboço: nenhum;
}
.botão de pesquisa.btn {
largura: 38px;
altura: 38px;
cursor: ponteiro;
recuo de texto: -9999px;
plano de fundo: #fbc900 url(search_bg.gif) sem repetição no canto superior direito;
}
.botão de pesquisa.btn:hover {
plano de fundo: #fbc900 url(search_bg.gif) sem repetição no canto inferior direito;
}Comentários especiais do IE
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->IE style-ie.css
Um amigo comentou que o IE6 e o IE7 rolariam a imagem de fundo horizontalmente se você inserisse muito texto, então minha abordagem foi usar uma imagem de fundo separada especificamente para o IE e, em vez de alinhá-la à esquerda, virei-a e alinhei o fundo imagem à direita para corrigir isso.
.pesquisa entrada.box {
plano de fundo: url (search_bg_ie.gif) sem repetição no canto inferior direito;
/* Uma imagem de fundo independente especificamente para o IE, e esta imagem deve estar alinhada à direita. ***/
}