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

The default fonts for all web forms are usually determined by the browser used, and technically, it is up to us to define what fonts 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 and the same color for both the user input and 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 helpful little bits of advice when coding roadblocks smack you in the face.

Previous PostNext Post

Leave a Reply

Your email address will not be published. Required fields are marked *