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

第一个元素变为蓝色表示它是活动元素（如果您想使用键盘更新日期），您可以通过使用伪元素指定它不应具有背景来设置它的样式： / p>

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

你的例子看起来像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何设置html5日期输入样式，第一个元素焦点/活动

1 个答案: