How to add CSS to the input placeholder

As the placeholder is not a real element, sometimes we can imagine that modifying its style is not possible, but yes, there is a way and in this post we will learn how to add CSS to the input placeholder!

In this post, we will see how to style the text that is inside the inputs, aka placeholder.

First, it is necessary to make it clear that there are two ways to do this, as they both have different effects, let’s see them in practice.

CSS in placeholder: text

I believe that what you came for in this post is this way, as we do to style the placeholder text

So we use the ::placeholder selector for this, see in practice:

HTML:

<input id="placeholder-text" type="text" name="name" placeholder="Enter your name">

CSS:

#placeholder-text::placeholder {
    color: red;
}

Final result:

See that in this example the placeholder text turned red, as we changed the CSS lines, cool right? 😀

Note: We can apply any CSS rule for texts in this case!

CSS in placeholder: element

We can also use another variation on how to style the placeholder

This way the element is styled when the placeholder is being displayed

A practical case would be a validation of an element that is required, we can signal that the content of this input has not yet been filled.

HTML:

<div>
    <input id="placeholder-text" type="text" name="name" placeholder="Digite seu nome">
</div>
<div>
    <input id="placeholder-text" type="text" name="job" placeholder="Digite sua profissão">        
</div>

CSS:

div {
    margin-bottom: 10px;
}

#placeholder-text {
    padding: 10px;
}

input:placeholder-shown {
    border: 3px dotted tomato;
}

Final result:

Note that this HTML has more code and CSS too, but the star of the code is the :placeholder-shown

This selector styles the elements when the placeholder is being displayed

So in the first input, I wrote ‘test’, the styling wasn’t done

But the second I left it blank, that’s why I mentioned the possibility of using this technique in a form of validation 🙂

Conclusion

In this article you learned how to add CSS to the input placeholder!

We saw the possibility of styling the placeholder in two ways

First, his text, which must be the reason for the most search for this topic

And finally, the element when the placeholder is showing

Did you find it cool? Comment there! 😀

And that’s it for today, until the next post!

Also, check out our free HTML and CSS course on YouTube by clicking here! Where we create a site from 0 to responsive 😀