Ir para conteúdo

POWERED BY:

Arquivado

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

Ricard0

imagem em input:text

Por , em Desenvolvimento frontend

Recommended Posts

Ricard0    0

Ricard0
Postado

Boa Tarde pessoal.

 

Hoje eu tava tentando fazer um sistema de login e senha para usuarios, e consegui certinho, só que achei interessante que alguns paineis de login tem tipo uma imagem aonde você escreve. Não entendeu ? aqui vai uma imagem para esclarecer, o que eu preciso :

 

exemploh.png

 

Sabe aquela imagem de usuario e a outra de uma chave ? queria saber como colocar uma imagem no lugar onde digita, igual a da imagem..

 

Se alguem puder me ajuda..

 

PS: Ja li varios tópicos de pessoas com o mesmo problema, mais não to conseguindo de jeito nenhum..

 

Código.. :

 

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="ISO-8859-1" />
<title>Evolution Control Painel Ragnarok - v1.0</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
* {
margin:0;
padding:0;
}
body {
font-family: Arial, sans-serif;
font-size:14px;
       background-color:#acddf9;
}
br {
clear:both;
}
#divPai {
width:600px;
height:250px;
padding:10px 30px;
border-radius:10px;
-moz-border-radius:10px;
background-image:url("images/bg.png");
margin:30px auto;
overflow:hidden;
border-bottom:1px solid #747474;
}
#divPai label {
display:block;
width:50px;
float:left;
color:#666;
text-shadow:#FFF 1px 1px;
line-height:24px;
}
#divPai input {
float:left;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #CCC;
padding:3px 5px;
margin-bottom:10px;
}
#divPai input#logar:hover {
       color:#c78005;
}
#divPai input#logar {
margin:0;
padding:7px;
       background-image:url("images/entrar.png");
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #feb323;
       cursor:pointer;
       font-weight:bold;
       color:#FFF;
}
#divImage {
margin:0px 124px;
padding:0px;
}
#divImage b {
       color:#f8f6f6;
}
#divImageDois b {
       color:#7bba0a;
}
#divImageDois a {
       text-decoration:none;
       color:#000;
       font-weight:bold;
       color:#FFF;
}
#divImageDois a:hover {
       cursor:pointer;
       color:#025e0f;
}
#divAmostra b {
       font-weight:bold;
       color:#dd3634;
       text-align:right;
}
</style>
</head>

<body>
<center><image src="images/logo.png" /></center>
<div id="divPai">
<form name="FrmLogin" id="FrmLogin" method="post" action="verifica_login.php">
<br />
<br />
<br />
	<label><b>Login</b></label>
	<input type="text" name="login" maxlength="15" size="26" /><br />

	<label><b>Senha</b></label>
	<input type="password" name="senha" maxlength="15" size="26" /><br />

	<input type="submit" name="logar" id="logar" value="Entrar no CP" />

<div id="divImage">

<div id="divImageDois">

<table align=center width=116 cellpadding=3 cellspacing=2 background="images/registrar.png" height="34">
<tr>
<td>
<font size=2 face="Arial, sans-serif">
<b>.......</b><a href="registro.php">Registrar</a>
</font>
</td>
</tr>
</table> 

</div>

</div>


<div id="divAmostra">
<br />

<b>Versao de amostra.<br />

Para testar :<br />

Login: *********<br />
Senha: *********<br />

Interessado ? mande um e-mail para contato@ricardosuman.com.br<br /></b>
</div>

</form>
</div>

<br />
<br />

<div id="footer">

 <div id="copy">
   <strong>Evolution Control Painel Ragnarok - v1.0</strong> - <strong>E-mail:</strong> contato@ricardosuman.com.br<br />
   © 2010 - <?php echo date('Y') ?> <a href="http://www.ricardosuman.com.br" target="_blank">Ricardo Suman - Private Games e Webdesign</a> - Todos os direitos Reervados
 </div><!--copy-->


</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hünter    0

Hünter
Postado

Cara na verdade você não coloca a imagem onde fica o texto, isso é só um fundo com um edit.

O com um fundo branco por EX, com o edit tambem branco faz com que o este permanesça escondido só o fundo

branco fica a mostra, dai você pode colocar qualque imagem e qualquer formato no seu EX é com cantos arredondados.

 

Bom eu tô no meu trabalho e estou sem recursos pra desenvolver um exemplo bem detalhado. Assim que eu puder

vou passar aqui de novo e se sua duvida ainda não estiver resolvida eu posto o código de como se faz isso. beleza.

 

 

falôu...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

define essa imagem (icone), com as bordas arredondadas como background do input.

 

depois use padding no input, para dar um espaçamento, assim não será possível escrever em cima da imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricard0    0

Ricard0
Postado

Depois só colocar background-image("imagem.png") no-repeat; pra n repetir ?

 

olha como fiz :

 

html :

 

<div id="divPai">
<form name="FrmLogin" id="FrmLogin" method="post" action="verifica_login.php">
<br />
<br />
<br />
	<label><b>Login</b></label>
	<input type="text" name="login" maxlength="15" size="26" /><br />

	<label><b>Senha</b></label>
	<input type="password" name="senha" maxlength="15" size="26" /><br />

	<input type="submit" name="logar" id="logar" value="Entrar no CP" />

<div id="divImage">

<div id="divImageDois">

<table align=center width=116 cellpadding=3 cellspacing=2 background="images/registrar.png" height="34">
<tr>
<td>
<font size=2 face="Arial, sans-serif">
<a href="registro.php">Registrar</a>
</font>
</td>
</tr>
</table> 

</div>

</div>

 

css

 

}
#divPai input.login {
       background-image:url("images/userlogin.png");
       padding:0px;

 

só que assim a imagem não aparece, ela some.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

aqui você usa uma class

.login

mas cadê ela?

<input type="text" name="login" maxlength="15" size="26" /><br />

??

 

troque por:

<input type="text" name="login" maxlength="15" size="26" class="login" /><br />

 

defina também height e width do tamanho da imagem.

o padding é para dar o espaçamento, então você vai ter que jogar um padding-left do tamanho da imagem, até o cursor do input sair de cima dela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então você fez algo errado ^_^

Simples assim.

 

Se tiver dúvidas, poste a imagem que está usando e o teu código mais atual.

Os passos para se fazer eu te dei.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Você não zera o padding, você define um padding à esquerda afastando a área editável para não escrever por cima da imagem

 

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

 

.input { background: url('imagem.jpg') left center no-repeat; padding-left: 15px; }

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