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

Question

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

这是一支笔：

<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

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

::-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 以获得您可以使用的所有伪元素的列表。

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

how to style html5 date input, first element focus/active

html

css

date

input

css-selectors