Ir para conteúdo

POWERED BY:

Arquivado

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

Jefrey

[Resolvido] Como colocar um botão dentro de um input text?

Por , em Desenvolvimento frontend

Recommended Posts

Jefrey    0

Jefrey
Postado

Eu sou da área de programação, mas estou iniciando no CSS.

Então, para os mais experientes, como eu poderia colocar um botão dentro de uma caixa de texto?

Vejam no site do Bing.com, que tem o submit do form dentro da própria caixa de texto, e o site do Google, que mostra um botão para o teclado virtual dentro da caixa de texto. Só que essas duas páginas estão criptografadas...

Eu já estudei um pouco e já aprendi a fazer essa caixa com uma imagem dentro, mas sem eventos. Assim:

<html>
<head>
<style type="text/css">
.botao{
	padding-left:35px;
	padding-top:5px;
	height:35px;     
	float: left;
	color: #6B6B6B;
	width: 320px;
	background-color: #F4F4F4;
	border: 1px;
	border-style: solid;
	border-color: #c4c4c4;
	margin-bottom: 12px;  
	background-image:url(imagem);  
	background-repeat:no-repeat;
}
</style>
</head>
<body>
<form>
<input type="text" class="botao" size="20">
</form>
</body>
</html>
Mas, e se eu quiser colocar um evento onClick nessa imagem? Como um submit?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Clica nesse link e instale o Firebug.

https://addons.mozilla.org/pt-BR/firefox/search/?q=firebug&cat=1%2C4&lver=any&pid=1&sort=&pp=20&lup=&advanced=

 

Nele, você vai ver o CSS e XHTML do site que tu deu de exemplo, ai é só fazer igual.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gabem MVP    0

Gabem MVP
Postado

Na maioria das vezes que eu vejo isso, na verdade não fica dentro, só o design que continua e da a impressão de que está dentro.

 

Tenta fazer isso com CSS. Se tiver duvidas pode me adicionar no msn, gabriel.rocha@msn.com

 

Att, Gabriel Rocha

 

Edit --

 

Exatamente como eu falei, o bing faz essa "ilusão" que na verdade é muito simples de fazer...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Com a utilização do Firebug, indicado pelo nosso amigo Guilherme_90, você realmente verá o que foi feito... Mas adiantando então: o input está sem borda, e a borda é aplicada em uma área (uma div, por exemplo), que envolve tanto o input quanto o botão...

<div id="area-form">
    <input type="search" name="keywords" title="Informe o que deseja procurar" />
    <button type="submit" title="Buscar">Buscar</button>
</div>
Aí é só "brincar" com o CSS!

 

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jefrey    0

Jefrey
Postado

Então eu tenho que colocar o botão flutuando, de forma que de a impressão de que está dentro?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Na verdade não precisa flutuar nada. Basta configurar um contêiner pai, de modo que este se pareça uma caixa de texto e tirar toda a formatação da caixa de texto real.

 

Com CSS3 dá pra fazer uns efeitos bem bacanas:

<div id="field">
<input type="text" size="40" />
<button type="button" id="virtual-keyboard"><img src="keyboard.png" alt="Teclado virtual" /></button>
</div>

 

#field {
	border: 1px solid #000;
	border-radius: 4px;
	box-shadow: inset 0 1px 5px #000;
	padding: 3px;
	width: 200px;
}

#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;
}

Exemplo online

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jefrey    0

Jefrey
Postado

Entendi, então o que o usuário vê não é a caixa, e sim uma "imitação" de caixa, não é? Legal!

Valeu a todos! Resolvido.

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