1

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?

Pete Rundle
  • 83
  • 1
  • 7
  • What part of this code makes it so that when you click anywhere on this field, the popup appears? In my code I am forced to click the picker button – Sina Sohi Dec 27 '16 at 14:21

1 Answers1

2

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.

Community
  • 1
  • 1
Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
  • What part of this code makes it so that when you click anywhere on this field, the popup appears? In my code I am forced to click the picker button. – Sina Sohi Dec 27 '16 at 14:15