如何設置html5日期輸入的樣式，第一個元素聚焦/有效

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

檢查此問題以獲取可以使用的所有偽元素的列表。