css - 如何设置 html5 日期输入的样式，第一个元素 focus/active

Question

我有一个已设置样式的日期输入，但我无法删除蓝色突出显示。

这是一支笔:

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;
    }

所以当你点击输入时，第一个元素不应该变成蓝色。有谁知道如何做到这一点？

Answer 1

第一个元素变为蓝色表示它是事件元素(如果你想使用键盘更新日期)，你可以通过使用伪元素指定它不应该有背景来设置它的样式:

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

注意:您不仅应该设置月份的样式，还应该设置所有三个元素(日/月/年)的样式，因为您不知道用户的计算机将采用哪种日期格式。代码将是这样的:

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

---

你的例子看起来像这样:

::-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">

检查 this question获取您可以使用的所有伪元素的列表。