1

I am having a hard time to style the HTML5 date picker, i just want to change the color of the current/selected day i need to remove the blue color! does any one know how to do so. here is a codepen https://codepen.io/MuTLY/pen/VvJaMx

In this example you can style the color of the text of the input, but i have no idea how to target the style (background-color) of the current/selected day

  &::-webkit-datetime-edit-month-field {
    color: red;
  }
  &::-webkit-datetime-edit-day-field {
    color: white;
  }
  &::-webkit-datetime-edit-year-field {
    color: blue;
  }
Elchy
  • 171
  • 5
  • 16
  • Does this answer your question? [Styling the calendar for html5 native datepicker](https://stackoverflow.com/questions/28531587/styling-the-calendar-for-html5-native-datepicker) – Martin Apr 07 '21 at 10:12
  • You can only influence the style of the input box area ([see here](https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker)), but not the style of the date picker popup content ([here](https://stackoverflow.com/questions/40164546/html5-input-date-calendar-styling/40166561#40166561) and [here](https://stackoverflow.com/questions/28531587/styling-the-calendar-for-html5-native-datepicker?noredirect=1&lq=1)). – Martin Apr 07 '21 at 10:15

1 Answers1

0

You can do this with adding the :focus selector. E.g.:

  &::-webkit-datetime-edit-month-field {
    color: red;
  }
  &::-webkit-datetime-edit-day-field {
    color: white;
  }
  &::-webkit-datetime-edit-day-field:focus {
    color: purple;
  }
  &::-webkit-datetime-edit-year-field {
    color: blue;
  }

Here the day is white unless it is selected, then is turns purple.

Achim
  • 247
  • 2
  • 11
  • the background of the current day stays blue! nothing has changed – Elchy Jan 31 '21 at 22:29
  • Are you sure? Here is a fork where I applied my changes: https://codepen.io/achimcc/pen/abBzjzX If I go there and click on the day field, it turns purple. Or is this not what you wanted? – Achim Feb 01 '21 at 06:47
  • 1
    I think I got now, what you are looking for @Elchy! You want to style something within the Datepicker window which opens, once you click on the Calendar icon, correct? I'm convinced, that this is not possible, since this is a native browser functionality. Try it on different Browsers, e.g. Safari, Chrome, IE, it will always look completely different! If you want to have a customised styling for this, you will have to install some external Datepicker library. – Achim Feb 01 '21 at 06:56