如何更改 Chrome 輸入日期占位符的文本顏色？

Question

我到處搜索，但找不到如何更改 Chrome 陰影 DOM 輸入日期元素的文本顏色。 大多數占位符具有柔和的灰色，但 Chrome 的 shadow DOM 文本是黑色的，然后當您添加日期時，文本顏色保持不變。 Chrome 已經將 shadow DOM 文本設為“mm/dd/yyyy”，這就是我需要更改的文本顏色。

<input type="date"/>

Answer 1

如果需要輸入字段，您可以使用:invalid選擇器，如下所示：

 input[type=date]:invalid::-webkit-datetime-edit { color: #999; }

 <input type="date" required /><br>

另一種解決方案是向輸入添加一個類，當輸入值時將其刪除。

 var el = document.getElementById('date'); el.onchange = function() { if (el.value === '') { el.classList.add("empty"); } else { el.classList.remove("empty"); } }

 .empty { color: #999; }

 <input type="date" id="date" class="empty" />

注意：我的第二個示例（帶有類的示例）將應用於所有瀏覽器。

之前已經回答過類似的問題，但它對我不起作用。

Answer 2

在這里添加我的超級簡單的 React 解決方案，供任何需要它的人使用！

 /* placeholder text style */ input[type="date"]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field { color: #888; } /* regular text style */ input[type="date"].date-input--has-value::-webkit-datetime-edit-text, input[type="date"].date-input--has-value::-webkit-datetime-edit-month-field, input[type="date"].date-input--has-value::-webkit-datetime-edit-day-field, input[type="date"].date-input--has-value::-webkit-datetime-edit-year-field { color: #f8f9fa; }

 <input type="date" name="date" className={(this.state.date) ? 'date-input--has-value' : ''} value={this.state.date} onChange={this.handleChange} />

基本上只是根據狀態值是否存在觸發一個 CSS 類。 顯然，僅適用於受控組件 - 但如果您已經進行了此設置，那么添加快速條件運算符和一些 CSS 樣式真的很容易！

我使用的顏色是我的深色主題網站所需要的顏色，但您顯然可以將它們更改為您喜歡的任何顏色。 需要四個不同的 CSS 選擇器來完全針對整個文本字段 - 第一個只針對 '/'（或 '.'，取決於語言環境）日期分隔符，接下來的三個分別針對月、日和年部分領域，分別。 是的，如果你覺得有必要，你可以讓每個人都變成不同的顏色……

——

忽略“運行代碼片段”位，因為如果沒有連接完整的 React 組件等等，它顯然無法工作。 我只是使用了代碼段視圖，因為它是並排顯示 CSS 和 HTML 的好方法。

Answer 3

CSS 更好的簡單方法就是這樣：

input[type=time]{
color: blue;
opacity: 34%;

}

Answer 4

你可以這樣做：

input[type=date] {
    color: #FFFFFF;
}