Nenhum produto encontrado nessa seleção.
Estilizar placeholder de inputs é relativamente simples, porém, existem alguns truques que devem ser seguidos para que a solução funcione corretamente em todos os navegadores.
Primeiramente, vamos falar da maravilha que o placeholder faz quando tratamos de formulários e inputs.
Provavelmente você deve se lembrar de ter visto dicas que ficam dentro dos inputs como texto, e, assim que você começa a digitar, o texto simplesmente desaparece, dando lugar ao conteúdo requerido por tal input.
Por exemplo, se tentarmos acessar o site outlook.com da Microsoft sem ter feito login, veja como os campos e-mail e senha aparecem:
E se eu digitar meu e-mail e senha, aquele texto de exemplo simplesmente desaparece:
Antigamente, tínhamos que escrever algumas linhas de código Javascript (um tanto confusas) para que isso funcionasse perfeitamente. Atualmente, isso pode ser feito com um simples atributo, o placeholder.
<input type="email" class="input-class" placeholder="Digite seu e-mail" required>
Perceba o atributo placeholder, que exibe o texto "Digite seu e-mail". Ele faz a mesma coisa que o exemplo anterior, simplesmente desaparece quando o usuário começa a digitar o texto.
O problema é: "Como estilizar placeholder de inputs?".
A solução é simples, veja:
/* Chrome, Safari, Opera */
::-webkit-input-placeholder {}
/* Firefox 18- */
:-moz-placeholder {}
/* Firefox 19+ */
::-moz-placeholder {}
/* IE10+ */
:-ms-input-placeholder {}Infelizmente temos que utilizar os prefixos dos navegadores, e pior, não da para agrupar em uma única regra, pois, se um navegador não reconhecer uma das regras, ele vai pular todo o trecho de código.
Veja um exemplo real.
O HTML
<input type="text" class="input-class" placeholder="Name" required> <input type="text" class="input-class" placeholder="Surname" required> <input type="email" class="input-class" placeholder="Email" required> <input type="text" class="input-class" placeholder="Phone" required>
O CSS
.input-class {
padding: 5px;
text-transform: uppercase;
width: 150px;
border: 1px solid #6db5f1;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
margin: 10px auto;
display: block;
}
.input-class:focus {
box-shadow: 0 0 5px #6db5f1;
width: 250px;
}
.input-class::-webkit-input-placeholder { /* Chrome, Safari, Opera */
color: #6db5f1;
font-style: italic;
}
.input-class:-moz-placeholder { /* Firefox 18- */
color: #6db5f1;
font-style: italic;
opacity: 1;
}
.input-class::-moz-placeholder { /* Firefox 19+ */
color: #6db5f1;
font-style: italic;
opacity: 1;
}
.input-class:-ms-input-placeholder { /* IE10+ */
color: #6db5f1;
font-style: italic;
}O exemplo acima deverá retornar o mesmo que o Codepen abaixo:
Codepen1
Veja também que para o Firefox, precisamos configurar a opacidade para 1, pois, caso não faça isso, a cor que você escolher vai ficar um pouco mais apagada.
opacity: 1;
Espero ter sido útil.
