How to fix the placeholder not showing for input type=”date” field with CSS?

Spread the love

Sometimes, we want to fix the placeholder not showing for input type="date" field with CSS.

In this article, we’ll look at how to fix the placeholder not showing for input type="date" field with CSS.

How to fix the placeholder not showing for input type="date" field with CSS?

To fix the placeholder not showing for input type="date" field with CSS, we set the content property.

For instance, we write

<input required placeholder="Date" class="textbox-n" type="date" id="date" />

to add the date input.

Then we write

input[type="date"]:not(:valid):before {
  content: attr(placeholder);
}

to show the placeholder if it’s not valid.

If it’s not filled, then it’s not valid since we added the required attribute.

Conclusion

To fix the placeholder not showing for input type="date" field with CSS, we set the content property.

Leave a Reply

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