how to style html5 date input, first element focus

Question

I have a date input that I've styled but I can't remove a blue highlight.

Here is a pen:

http://codepen.io/pjrundle/pen/PqjKBZ

<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">

::-webkit-inner-spin-button {
        display: none;
    }
    ::-webkit-clear-button {
        display: none;
        -webkit-appearance: none;
    }
    ::-webkit-calendar-picker-indicator {
        opacity: 0;
        height: 14px;
        width: 80px;
        border: 1px solid green;
        z-index: 2;
        position: absolute;
        left: 9px;
        top: 8px;
    }

so when you click on the input, the first element should not go blue. Does anyone know how to do this?

Answer 1

The first element goes blue to indicate that it is the active element (in case you want to update the date using the keyboard), you can style it by specifying that it should not have a background using the pseudo-elements:

::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field

Notice: you should style not only the month, but all three elements (day/month/year) as you don't know which date format the user's computer will have. The code would be like this:

::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }

---

And your example would look like this:

::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }

::-webkit-inner-spin-button {
  display: none;
}
::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
  opacity: 0;
  height: 14px;
  width: 80px;
  border: 1px solid green;
  z-index: 2;
  position: absolute;
  left: 9px;
  top: 8px;
}

<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">

Check this question for a list of all the pseudo-elements that you can use.