Issue
I found many questions on input type="date" but none of them on the placeholder text color.
How do I change the placeholder text color of <input type="date" />
?
I'm trying to make the placeholder text a different color, but this won't work:
/** won't work */
input::placeholder {
color: grey;
}
/** this changes the text color of the entire input, not just the placeholder */
input::-webkit-datetime-edit {
color: grey;
}
Solution
The only way to achieve this is by adding your own indicator wether or not the input is empty or not. (with JS or HTML attrs)
The HTML5 way
You can add required
to your <input type="date" required />
.
Then you can target it like so:
input[type="date"]:not(:valid)::-webkit-datetime-edit {
color: grey;
}
The JavaScript way
Add and remove a class (eg. .empty
) to your <input type="date" />
whenever the input is empty or not.
Then you can target it like so:
input.empty::-webkit-datetime-edit {
color: grey;
}
Answered By - mesqueeb
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.