0

A cor do placeholder dos input fica mais forte que a da textarea!

estou usando o CSS assim:

::-webkit-input-placeholder { /* WebKit browsers */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
1
  • a cor da textarea fica mais claro do que os inputs... No Chrome e Firefox
    – user3081
    Commented 2/09/2015 às 5:04

1 Resposta 1

1

Isto mais provavelmente será porque estás a aplicar o font-weight:bold; no placeholder e na textarea não, o que vai fazer com que o texto fique mais forte no placeholder.

O font-size: 14px; também poderá contribuir para essa diferença, como acontece neste caso.

Eis um exemplo disto no trecho de código abaixo, o font-weight:bold; é apenas aplicado ao placeholder exatamente como no código da tua pergunta. Copia o texto do placeholder e cola na textarea para ver o resultado:

::-webkit-input-placeholder { /* WebKit browsers */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
<textarea placeholder="Descreva o seu texto aqui..."></textarea>

Agora vamos adicionar os mesmos estilos que adicionas-te no placeholder para a textarea, para que ambos fiquem iguais, ou seja adicionando o font-weight:bold; e também o font-size: 14px;:

::-webkit-input-placeholder { /* WebKit browsers */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #757575 !important; font-size: 14px; font-weight: bold;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #757575 !important; font-size: 14px; font-weight: bold;
}

/* font-weight:bold; adicionado à textarea */
textarea { font-size: 14px; font-weight: bold;}
<textarea placeholder="Descreva o seu texto aqui..."></textarea>

3
  • PS: Verifica também se nenhuma cor de estilo está a ser aplicada à textarea{ } que seja menos forte que a do placeholder
    – Chun
    Commented 2/09/2015 às 6:22
  • Mas a cor da textarea ainda continua clarinha! Só fica mais escuro quando tem algum texto dentro dela
    – user3081
    Commented 2/09/2015 às 15:27
  • Então pois, pois é assim mesmo que é suposto ser, para que os usuários percebam que é apenas um texto exemplar. Se quiseres que a cor do placeholder fique com a mesma cor do texto escrito, basta mudares a cor do texto do placeholder que adicionas-te - color:#757575; para - color:#000; por exemplo, ou qualquer outra cor que desejares. Tens aqui um exemplo online no jsFiddle.
    – Chun
    Commented 2/09/2015 às 16:26

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 .