Standardize color of letters textarea with placeholder

0

The input placeholder color gets stronger than textarea!

                           

I'm using CSS like this:

::-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;
}
    
asked by anonymous 02.09.2015 / 06:50

1 answer

1

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>
    
02.09.2015 / 08:15