Standardize color of textarea letters with placeholder

Asked

Viewed 405 times

0

The color of input placeholder is 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;
}
css placeholder

  • textarea color is lighter than inputs... In Chrome and Firefox

1 answer

1


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>

  • PS: Also checks if no style color is being applied to textarea{ } that is less strong than that of the placeholder

  • But the color of the textarea is still bright! It only gets darker when there is some text inside it

  • So yeah, because that’s the way it’s supposed to be, so users realize that it’s just an exemplary text. If you want the color of placeholder keep the same color as the written text, just change the color of the placeholder text you added - color:#757575; for - color:#000; for example, or any other color you want. Here’s a online example in jsFiddle.

Browser other questions tagged css placeholder

You are not signed in. Login or sign up in order to post.