Ir para conteúdo

Arquivado

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

guest-user

Customizar INPUT

Por , em Desenvolvimento frontend

Recommended Posts

guest-user    0

guest-user
Postado

fDa4Dn9.png<-- ESTÁ ASSIM dá para escrever em tudo.

FPj0dZf.png

Olá a todos, queria saber como faço para deixar o imput com um lado fixo que não pode ser usado como campo para escrever, exemplo na Parte PRETA ficasse escrito o Email e Senha não como placeholder e na parte VERMELHA ficasse o placeholder com o campo para preencher os dados de login. Podem me ajudar como faço podem dar exemplo de código html ou css abaixo ficaria muito grato !.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

De um modo rápido, dá pra fazer assim:

 

- Coloca o input com um "padding-left" grande, para que a palavra caiba nesse espaço;

- Coloca esse input um "position: relative";

- Cria um "::before" nesse input com a palavra que você quer e aloca ele no espaço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guest-user    0

guest-user
Postado

Obrigado mais no CSS sou meio ruim consegui fazer metade com tutorias segue meu código.

 

Poderia explicar melhor amigo agradeço de coração a força que esta dando :).

 

<HTML>

<div class="form-login">
<form action="" method="post">
    <input type="email" class="input-email" id="email" name="email" placeholder="Email      exemplo@email.com">
    <input type="senha" class="input-senha" id="senha" name="senha" placeholder="Senha      obrigatória">
</div>
</form>

<CSS>

.form-login {
    padding-top: 0px;
    overflow: hidden;
    margin: 10 auto;
    width: 324px;
    height: 90px;
    border-radius: 5px;
    border: 1px solid #89A1AF;
    background: rgba(255, 255, 255, 0.75);
    
}


.input-email {
    border-bottom: 1px solid #C8D2D5;
    outline: none;
    width: 100%;
    border-right: none;
    border-left: none;
    border-top: none;
    height: 45px;
    background: none;
    font-size: 16px;
    color: black;
    padding: 12px;
    font-family: 'Raleway', sans-serif;
}
.input-senha {
    outline: #89A1AF;
    width: 100%;
    height: 46px;
    background: transparent;
    font-size: 16px;
    color: black;
    padding: 12px;
    font-family: 'Raleway', sans-serif;
    border: none;
}

TJRRCcf.png

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