Change The Placeholder Font For A Textarea Field With CSS

Have you ever wondered why the default font for a form textarea field is different when using a placeholder?

Well, the default fonts for all forms are usually determined by the browser being used and technically it is up to us to define what fonts and/or styles to display via our CSS.

Here is how you can define the annoying discrepancy in font styles when using placeholders for your form, specifically with textarea fields.

Argh! The Textarea & Input Fields Don’t Match!

First thing first, let’s set our default font and color for all of the input and textarea form fields with the below CSS code:

input, textarea {font-family: Arial; color: #333;}

Next Up, Our CSS For The Form Placeholder Text

Now, we want to apply the exact same styling (or something a bit different if you prefer) for the placeholder display using the below CSS code:

textarea::placeholder {font-family: Arial; color: #333;}
input::placeholder {font-family: Arial; color: #333;}

Now your form input fields and textarea fields will have the same font as well as the same color for both the user input as well as the placeholder text.

I hope this made your day a bit better, if you are a designer/developer, I know that it’s all about those little helpful bits of advice when coding roadblocks smack you in the face.