Ir para conteúdo

POWERED BY:

Arquivado

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

Germano Silva

Input como os da tela de cadastro do facebook

Por , em Desenvolvimento frontend

Recommended Posts

Germano Silva    0

Germano Silva
Postado

Gostaria de saber se alguém teria como me dizer o código para criar inputs semelhantes da tela de cadastro do facebook, com bordas arredondadas, com valor no próprio campo do input a ser preenchido com uma cor cinza claro e que suma quando algo for digitado e volte aparecer o valor quando for apagado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

am designer    7

am designer
Postado

Para bordas pesquise sobre: border-radius,
Para os values padrões nos inputs, pesquise por: placeholder.

 

Ambas opções são do CSS3, HTML 5...ta muito facíl de usar.

Caso não queira usar css 3 e html5, pesquise por bordas arredondas no google que tem bastante truque com css e para placeholder tem alguns codigos em JS que ajudam bastante.

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

BrittosMonteiro    0

BrittosMonteiro
Postado
HTML


<link rel="stylesheet" href="css/estilo.css" />

<body>

<header>

<h1>

<a href="index.html">facebook</a>

</h1>

<form action="entrar/" method="post" name="login" id="login">

<input type="text" name="usuario" placeholder="Nome de usuário"/>

<input type="password" name="senha" placeholder="Senha" />

<input type="submit" name="btn" value="Entrar" />

</form>

</header>

</body>


CSS



body{

width:100%;

margin:0;

padding:0;

font-family:tahoma;

font-size:11px;

}

header{

width:100%;

float:left;

background-color:#3B5998;

}

header h1{

float:left;

margin:10px;

padding:5px;

}

header h1 a{

color:#fff;

text-decoration:none;

}

#login{

float:right;

margin:15px;

padding:0;

font-family:tahoma;

}

#login input[type=text], input[type=password]{

padding:7px;

border:none;

border-radius:2px;

font-family:tahoma;

}

#login input[type=submit]{

font-family:tahoma;

border:2px #5d7bba solid;

background-color:#4c6aa9;

color:#fff;

}

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