Native Html Datepicker Styling

Question

sommeone knows how i can change the color of the text, after an User select a date? If possible achiev it only with css.

I have this colors:

input[type="date"]::-webkit-datetime-edit-text { color: #dbdbdb }
input[type="date"]::-webkit-datetime-edit-month-field { color: #dbdbdb; }
input[type="date"]::-webkit-datetime-edit-day-field { color: #dbdbdb; }
input[type="date"]::-webkit-datetime-edit-year-field { color: #dbdbdb; }

So, after the User choice a date, I wanna change this input text/placeholder color.

Does this answer your question? [Are there any style options for the HTML5 Date picker?](https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker) — Alon Eitan, May 28 '20 at 12:12

f.overflow · Accepted Answer · 2020-05-28T12:28:40.390

0

you could achieve that by making the input field required and then using the pseudo-element for the input field.

.form-control:valid {
  color: green;
}
.form-control:invalid {
  color: black;
}

   <input type="date" class="form-control" placeholder="Your input" required>

If you don t want to make the field required, you can use the pseudo-element "placeholder-shown".

input:not(:placeholder-shown) {
  color: green;
}

input:placeholder-shown {
  color: black;
}

Might reach more devices than only using WebKit technology

edited May 28 '20 at 12:28

answered May 28 '20 at 12:21

f.overflow

298
1
9

Your solution works very well. I did a test with a new html. But isnt working with Bulma Framework, idk why. – Ikkyy May 28 '20 at 12:33

Native Html Datepicker Styling

1 Answers1