Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

felipebath

Estilizar input de busca

Por , em Desenvolvimento frontend

Recommended Posts

felipebath    0

felipebath
Postado

Bom dia!

 

Encontrei varios posts sobre imagens de fundo em input atraves de css, porem nenhum funciona no IE.

 

Tentei com este código para me aproximar do que eu desejava, mas nao funciona no IE.

 

input[type="text"]
{
   border: none;
   background: url(imagem.png) no-repeat center right; 
   padding-top: 2px;
   text-indent: 8px;
   width: 240px;
   height: 39px;
}

 

mas na verdade eu precisava de um input exatamente assim: Imagem Postada

 

Alguem tem uma sugestao?

 

Grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o problema é o seletor.

 

troque

input[type="text"]
por

input
e então, para o input type="submit", checkbox, e radio.. crie classes para diferencia-los.

 

outra alternativa, é aplicar usando os seletores jQuery.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

com background-image, exatamente como você sugeriu.

 

dê uma class para ele, e então aplique.

 

<input type="text" class="tal" />

.tal { background... }

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, é possível fazer.. e a solução é com css/html ^_^

 

dá uma estudada. Vou mover para o fórum correto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

hum.. até 'tem', mas se você não souber fazer o html+css correto e que funcione... de nada de adianta jQuery :lol:

 

lembre-se: o browser lê html+css

 

javascript (jQuery), atuam sobre html+css, que é uma linguagem basicamente manipuladora de eventos..

não tem mágica..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vini_Aviva    13

Vini_Aviva
Postado

Concegui fazer um efeito parecido sem nenhuma image

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
#campo {
	border-color: #cccccc;
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 4px;
	padding-right: 20px;
}
#botao {
	color:#fff;
	background-color:#cccccc;
	position:absolute;
	border-color: #cccccc;
	border-width: 2px 2px 2px 0px;
	border-style: solid;
	border-radius: 0px 10px 10px 0px;
	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	padding: 4px;
	left: 160px;
}
</style>
</head>

<body>
<input type="text" id="campo" value="Pesquisa ..." />
<input type="button" id="botao" value="Buscar" />
</body>
</html>

=) so parecido...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Só um adendo:

 

O seletor

input[type="text"]

funciona a partir do IE7, então não há problemas em usá-lo

Compartilhar este post

Link para o post
Compartilhar em outros sites

mauelement    0

mauelement
Postado

Crie também uma div pra englobar esse campo de busca.

 

Dá um position relative pra essa div e especifica altura e largura.

 

Assim você vai ter 100% de controle sobre o position absolute desses inputs. Evitando a quebra dependendo da resolução.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

melhor usar um <label> do que uma <div> ne!?

 

já que estamos num formulário.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Simples

<form action="" method="get">
<input type="text" />
<button type="submit">Buscar</button>
</form>

 

e prático

form {
	background: #555;
	border: 2px solid #555;
	border-radius: 4px;
	margin: 10px;
	width: 500px;
}

form * {
	border: 0;
	font: 16px bold "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

form input {
	width: 420px;
	height: 40px;
}

form button {
	background: #555;
	color: #fff;
	width: 70px;
}

Testado em: Opera 10.63, Chrome 7, Firefox 4.0b6, IE 9, Safari 5.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Adicionando o <fieldset> ao formulário, só para deixar o código, além de válido, mais semântico... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Simples

<form action="" method="get">
   <fieldset>
       <input type="text" />
       <button type="submit">Buscar</button>
   </fieldset>
</form>

 

e prático

form fieldset {
	background: #555;
	border: 2px solid #555;
	border-radius: 4px;
	margin: 10px;
	width: 500px;
}

form fieldset * {
	border: 0;
	font: 16px bold "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

form fieldset input {
	width: 420px;
	height: 40px;
}

form fieldset button {
	background: #555;
	color: #fff;
	width: 70px;
}

Testado em: Opera 10.63, Chrome 7, Firefox 4.0b6, IE 9, Safari 5.

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito