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.
