This is most likely because you’re applying the font-weight:bold;
in the placeholder and in the textarea
no, which will make the text stronger in the placeholder.
The font-size: 14px;
could also contribute to this difference, as is the case here.
Here is an example of this in the code section below, the font-weight:bold;
is only applied to the placeholder exactly as in your question code. Copy placeholder text and paste into textarea
to see the 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 you added to placeholder to the textarea
, so that both become equal, that is to say adding the font-weight:bold;
and also the 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>
textarea color is lighter than inputs... In Chrome and Firefox
– user3081