如何风格HTML5日期输入，第一元件聚焦/活性(how to style html5 date in

我有我的风格输入的日期，但我无法取出一个蓝色的亮点。

这里是一个笔：

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

检查这个问题对于所有可以使用伪元素的列表。

文章来源: how to style html5 date input, first element focus/active