13

Em HTML5, podemos fazer uso do atributo placeholder (Inglês) com vista a dar ao utilizador uma dica sobre o tipo de dados que determinado campo aceita.

Para evitar confusões entre dados realmente escritos pelo utilizador e o texto com as instruções, gostaria de aplicar uma cor distinta ao texto do placeholder.

<input type="text" placeholder="Primeiro e Último nome apenas" value="John Doe">
<!--               └────────────────────┬────────────────────┘ └──────┬───────┘  
                                   color: #ccc                   color: #444
-->

Pergunta

Recorrendo apenas a CSS, como podemos definir a cor para o placeholder sem afectar a cor definida para o value numa maneira que funcione nos diversos navegadores ?

2 Respostas 2

27

Você precisa usar propriedades não-padrão do CSS para afetar somente o placeholder:

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Solução encontrada no site CSS Tricks

Isso deve funcionar em todos os browsers modernos. O IE suporta o atributo placeholder e a pseudo-classe :-ms-input-placeholder a partir da versão 10.

0
8
input,
textarea {
    padding: 10px;
    display: block;
    width: 70%;
}

::-webkit-input-placeholder {
   color: orange;
   font: 12px verdana, arial, sans-serif;
}

:-moz-placeholder {
   color: orange;
   font: 12px verdana, arial, sans-serif;
}

::-moz-placeholder {
   color: orange;  
   font: 12px verdana, arial, sans-serif;
}

:-ms-input-placeholder {  
   color: orange;  
   font: 12px verdana, arial, sans-serif;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .