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 :
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
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
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
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. ***/
}