This will most likely be because you are applying font-weight:bold;
to placeholder and textarea
, which will make the text stronger in placeholder .
font-size: 14px;
may also contribute to this difference, as in this case.
Here's an example of this in the code snippet below, font-weight:bold;
is only applied to the placeholder exactly like the code in your question. Copy placeholder text and paste in textarea
to see result:
::-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>
Now let's add the same styles that you add in the placeholder for the textarea
, so that both are equal, ie adding font-weight:bold;
and also 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>