Como colocar um botão dentro de um input text?

Paulo AndrÃ© Carminati · Março 30, 2012

Pessoal sou novo em css e estou apanhando o dia todo.

usei como base o código citado pelos colegas desta página:

e no mu caso ficou da seguinte forma:

<div id="field">
<input type="text" size="40" />
<button type="button" id="Pesquisar_botao"><img src="pesquisar.png" alt="Pesquisar" /></button>
</div>

_____________


#field {
       border: 1px solid #000;
       border-radius: 2px;
       box-shadow: inset 0 1px 2px #000;
       padding: 2px;
       width: 200px;
       margin-right:auto;
	margin-left:auto; 

}

#field * {
       background: transparent;
       border: none;
}

#field input {
       display: block;
       float: left;
       font: 16pt bold Verdana, Geneva, sans-serif;
       height: 40px;
       line-height: 40px;
       width: 150px;
}

#field button {
       display: block;
       height: 40px;
       margin: 0;
       margin-left: 160px;
       padding: 4px;
       width: 40px;
}

#field button img {
       height: 32px;
       width: 32px;
}

Só que no meu caso na frente da caixa de texto eu tenho que colocar o palavra Pesquisar

ficaria:

"Pesquisar: + caixa de texto com a imagem dentro"

já tentei inclusive fazer dentro de uma tabela apagando bordas e tal mas não deu certo.

preciso de ajuda.

____________________________________________

meu XHTML COMPLETO:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TRABALHO DE CSS / XHTML</title>
<link rel="stylesheet" type="text/css" href="Style/estilo.css" />
</head>
<body>
<p></p>
<div style="width: 48%; float: left;">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknow printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
eletronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of letraset sheets containing Lorem Ipsum
passages, and more recently with descktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.
</div>
<div style="width: 48%; float: right;">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknow printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
eletronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of letraset sheets containing Lorem Ipsum
passages, and more recently with descktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.
</div>
<div style="clear: both;"></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<table>
	<caption>Os 9 últimos filmes ganhadores do Oscar</caption>
	<tr>
		<th>TÍTULO</th>
		<th>TÍTULO ORIGINAL</th>
		<th>ANO</th>
		<th>DIRETOR</th>
		<th>ATORES PRINCIPAIS</th>
	</tr>
	<tr>
		<td>O Discurso do Rei</td>
		<td>The King Spreech</td>
		<td>2010</td>
		<td>Tom Hooper</td>
		<td>Colin Firth e Geoffrey Rush</td>
	</tr>
	<tr>	
		<td>Guerra ao Terror</td>
		<td>The hurt locker</td>
		<td>2009</td>
		<td>Kathryn Bigelow</td>
		<td>Jeremy Renner e Anthony Mackie</td>
	</tr>	
	<tr>	
		<td class="a">Quem quer ser um milionário?</td>
		<td class="a">Slumdog Milionaire</td>
		<td>2008</td>
		<td>Danny Boyle</td>
		<td>Dev Patel e Freida Pinto</td>
	</tr>
	<tr>
		<td>Onde os fracos não têm vez</td>
		<td>No Contry for old Men</td>
		<td>2007</td>
		<td>Joel Coen e Ethan Coen</td>
		<td>Tommy Lee Jones e Javier Bardem</td>
	</tr>
	<tr>
		<td class="b">Os infiltrados</td>
		<td class="b">The Departed</td>
		<td class="b">2006</td>
		<td class="b">Martin Scorsese</td>
		<td class="b">Jack Nicholson e Matt Damon</td>
	</tr>
	<tr class="c">
		<td>Crach - no limite</td>
		<td>Crash</td>
		<td>2005</td>
		<td>Paul Haggis</td>
		<td>Sandra Bullock e Matt Dillon</td>
	</tr>
	<tr class="c">
		<td>Menina de ouro</td>
		<td>Million Dollar Baby</td>
		<td>2004</td>
		<td>Clint Eastwood</td>
		<td>Morgan Freeman e Hilary Swank</td>
	</tr>
	<tr class="c">
		<td>O senhor dos anéis : O retorno do rei</td>
		<td>The lord of the rings: The Return of the King</td>
		<td>2003</td>
		<td>Peter Jackson</td>
		<td>Elijah Wood e Liv Tyler</td>
	</tr>
	<tr class="c">
		<td>Chicago</td>
		<td>Chicago</td>
		<td>2002</td>
		<td>Rob Marshall</td>
		<td>Renée Zellweger e Catherine Zeta-Jones</td>
	</tr>
</table>
<p></p>
<table id="pes">
	<tr>
		<th>Pesquisar:</th>
		<th>
			<div id="field">
       			<input type="text" size="40" />
       			<button type="button" id="Pesquisar_botao"><img src="pesquisar.png" alt="Pesquisar" /></button>
			</div>
		</th>
	</tr>
</table>
</body>
</html>

______________________________________________

meu css completo:

@CHARSET "ISO-8859-1";


body {
text-align: justify;
margin-top:auto;
margim-right:auto;
margim-bottom:auto;
margim-left:auto;

}

div {
font-style: normal;
font-family: verdana;
font-weight:bold;
}

caption{
	font-weight:bold;
	background-color: #7c83e0;
	color: #ffffff;
	border-width: thin;
	border-style: solid;
	border-color: black;
	text-align: center;
}

table{
border-collapse:collapse;
margin-right:auto;
margin-left:auto; 
font-style: normal;
font-family: sans-serif;
border-width: medium;
border-style: solid;
}

table th{
background-color: #c4c7ea;
text-align: center;	
}

table .a{
color: blue;
text-decoration: underline;
border-top-style: solid;
border-color: black;
font-weight:bold;
}

table .b{
background-color: red;
font-weight: bold; 

}

table .c{
border-width: thin;
border-style: solid;
border-color: black;
}
table td{
border-top-style: solid;
border-width: thin;
}


}

#field {
       border: 1px solid #000;
       border-radius: 2px;
       box-shadow: inset 0 1px 2px #000;
       padding: 2px;
       width: 200px;
       margin-right:auto;
	margin-left:auto; 

}

#field * {
       background: transparent;
       border: none;
}

#field input {
       display: block;
       float: left;
       font: 16pt bold Verdana, Geneva, sans-serif;
       height: 40px;
       line-height: 40px;
       width: 150px;
}

#field button {
       display: block;
       height: 40px;
       margin: 0;
       margin-left: 160px;
       padding: 4px;
       width: 40px;
}

#field button img {
       height: 32px;
       width: 32px;
}

Juste · Março 30, 2012

Pessoal sou novo em css e estou apanhando o dia todo.

usei como base o código citado pelos colegas desta página:

Clique aqui

e no mu caso ficou da seguinte forma:

<div id="field">
<input type="text" size="40" />
<button type="button" id="Pesquisar_botao"><img src="pesquisar.png" alt="Pesquisar" /></button>
</div>

_____________


#field {
       border: 1px solid #000;
       border-radius: 2px;
       box-shadow: inset 0 1px 2px #000;
       padding: 2px;
       width: 200px;
       margin-right:auto;
	margin-left:auto; 

}

#field * {
       background: transparent;
       border: none;
}

#field input {
       display: block;
       float: left;
       font: 16pt bold Verdana, Geneva, sans-serif;
       height: 40px;
       line-height: 40px;
       width: 150px;
}

#field button {
       display: block;
       height: 40px;
       margin: 0;
       margin-left: 160px;
       padding: 4px;
       width: 40px;
}

#field button img {
       height: 32px;
       width: 32px;
}


Só que no meu caso na frente da caixa de texto eu tenho que colocar o palavra Pesquisar

ficaria:

"Pesquisar: + caixa de texto com a imagem dentro"

já tentei inclusive fazer dentro de uma tabela apagando bordas e tal mas não deu certo.

preciso de ajuda.


____________________________________________


meu XHTML COMPLETO:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TRABALHO DE CSS / XHTML</title>
<link rel="stylesheet" type="text/css" href="Style/estilo.css" />
</head>
<body>
<p></p>
<div style="width: 48%; float: left;">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknow printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
eletronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of letraset sheets containing Lorem Ipsum
passages, and more recently with descktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.
</div>
<div style="width: 48%; float: right;">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknow printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
eletronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of letraset sheets containing Lorem Ipsum
passages, and more recently with descktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.
</div>
<div style="clear: both;"></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<table>
	<caption>Os 9 últimos filmes ganhadores do Oscar</caption>
	<tr>
		<th>TÍTULO</th>
		<th>TÍTULO ORIGINAL</th>
		<th>ANO</th>
		<th>DIRETOR</th>
		<th>ATORES PRINCIPAIS</th>
	</tr>
	<tr>
		<td>O Discurso do Rei</td>
		<td>The King Spreech</td>
		<td>2010</td>
		<td>Tom Hooper</td>
		<td>Colin Firth e Geoffrey Rush</td>
	</tr>
	<tr>	
		<td>Guerra ao Terror</td>
		<td>The hurt locker</td>
		<td>2009</td>
		<td>Kathryn Bigelow</td>
		<td>Jeremy Renner e Anthony Mackie</td>
	</tr>	
	<tr>	
		<td class="a">Quem quer ser um milionário?</td>
		<td class="a">Slumdog Milionaire</td>
		<td>2008</td>
		<td>Danny Boyle</td>
		<td>Dev Patel e Freida Pinto</td>
	</tr>
	<tr>
		<td>Onde os fracos não têm vez</td>
		<td>No Contry for old Men</td>
		<td>2007</td>
		<td>Joel Coen e Ethan Coen</td>
		<td>Tommy Lee Jones e Javier Bardem</td>
	</tr>
	<tr>
		<td class="b">Os infiltrados</td>
		<td class="b">The Departed</td>
		<td class="b">2006</td>
		<td class="b">Martin Scorsese</td>
		<td class="b">Jack Nicholson e Matt Damon</td>
	</tr>
	<tr class="c">
		<td>Crach - no limite</td>
		<td>Crash</td>
		<td>2005</td>
		<td>Paul Haggis</td>
		<td>Sandra Bullock e Matt Dillon</td>
	</tr>
	<tr class="c">
		<td>Menina de ouro</td>
		<td>Million Dollar Baby</td>
		<td>2004</td>
		<td>Clint Eastwood</td>
		<td>Morgan Freeman e Hilary Swank</td>
	</tr>
	<tr class="c">
		<td>O senhor dos anéis : O retorno do rei</td>
		<td>The lord of the rings: The Return of the King</td>
		<td>2003</td>
		<td>Peter Jackson</td>
		<td>Elijah Wood e Liv Tyler</td>
	</tr>
	<tr class="c">
		<td>Chicago</td>
		<td>Chicago</td>
		<td>2002</td>
		<td>Rob Marshall</td>
		<td>Renée Zellweger e Catherine Zeta-Jones</td>
	</tr>
</table>
<p></p>
<table id="pes">
	<tr>
		<th>Pesquisar:</th>
		<th>
			<div id="field">
       			<input type="text" size="40" />
       			<button type="button" id="Pesquisar_botao"><img src="pesquisar.png" alt="Pesquisar" /></button>
			</div>
		</th>
	</tr>
</table>
</body>
</html>

______________________________________________

meu css completo:

@CHARSET "ISO-8859-1";


body {
text-align: justify;
margin-top:auto;
margim-right:auto;
margim-bottom:auto;
margim-left:auto;

}

div {
font-style: normal;
font-family: verdana;
font-weight:bold;
}

caption{
	font-weight:bold;
	background-color: #7c83e0;
	color: #ffffff;
	border-width: thin;
	border-style: solid;
	border-color: black;
	text-align: center;
}

table{
border-collapse:collapse;
margin-right:auto;
margin-left:auto; 
font-style: normal;
font-family: sans-serif;
border-width: medium;
border-style: solid;
}

table th{
background-color: #c4c7ea;
text-align: center;	
}

table .a{
color: blue;
text-decoration: underline;
border-top-style: solid;
border-color: black;
font-weight:bold;
}

table .b{
background-color: red;
font-weight: bold; 

}

table .c{
border-width: thin;
border-style: solid;
border-color: black;
}
table td{
border-top-style: solid;
border-width: thin;
}


}

#field {
       border: 1px solid #000;
       border-radius: 2px;
       box-shadow: inset 0 1px 2px #000;
       padding: 2px;
       width: 200px;
       margin-right:auto;
	margin-left:auto; 

}

#field * {
       background: transparent;
       border: none;
}

#field input {
       display: block;
       float: left;
       font: 16pt bold Verdana, Geneva, sans-serif;
       height: 40px;
       line-height: 40px;
       width: 150px;
}

#field button {
       display: block;
       height: 40px;
       margin: 0;
       margin-left: 160px;
       padding: 4px;
       width: 40px;
}

#field button img {
       height: 32px;
       width: 32px;
}
[/quote]

Colega acho que eu entendi seu problema. Como eu achei seu código muito confuso eu preferi não edita-lo , mas criei um modelo do que você está precisando. Para este caso você deverá utilizar um seletor do tipo "atributo", você pode estudar mais sobre ele consultando o W3C. Quanto a utilização de tabelas, as faça somente se você realmente precisar de uma tabela (leia mais sobre tableless). 
[code]
<html>
   <head>

       <title>Form</title>
       <style type="text/css">

           /* Estes são os "seletores de atributo'", para entender melhor  seu funcionamento consulte a documentação da W3C * /'

           /*aqui voce controla a largura da caixa de texto, assim como a cor , borda , etc */
           input[name="pesquisa"] {
               width: 500px;
           }      

           /*aqui você está controlando o posicionamento do botão , tamanho e outras opções que você pode explorar*/
           input[name="botao"] { 
              position:relative; 
              width: 25px;
              height: 25px;
              left:-30px;

           }


       </style>

   </head>
   <body>
       <form>
            Pesquisar <input type="text" name="pesquisa">
           <input type="image"  src="caminho da imagem.extensão" alt="descreva o objeto"  name="botao">
       </form>




   </body>

[/code]

Paulo AndrÃ© Carminati · Março 30, 2012

Opa , então eu usei a tebela dentro do div, pois eu não conseguia pensar em mais nenhuma alternativa, pois não é para usar a tabela. O meu css, está confuso mesmo eu sei, mas não tem problema para entregá-lo. O problema é que eu tenho de usar xhtml strict e se der aquela mensagem laranja no eclipse ferrou.

Mais uma coisa obrigatoriamente eu tenho que usar o css externo, não posso de forma alguma usar o interno. pessoalmente acho que seria muito melhor usar o interno algumas vezes mas fazer o que são ordens.

como deve ficar:

como está no momento:

o detalhe é que eu tenho de centralizar o botão pesquisar, tudo bem fiz, mas fiz usando o a tag <center> e não posso usá-la.

Giovani · Março 30, 2012

Coloca o fundo ou borda no form e dentro dele flutua o input e o botão, vai conseguir fazer o efeito que você quer ;)

Entrar

Arquivado

Como colocar um botão dentro de um input text?

Recommended Posts

Paulo AndrÃ© Carminati 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Juste 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo AndrÃ© Carminati 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante