我已经到处搜索了,但找不到如何更改Chrome的shadow DOM输入日期元素文本颜色。大多数占位符都有柔和的灰色,但Chrome的shadow DOM文本是黑色的,当你添加日期时,文本颜色仍然保持不变。 Chrome已经将shadow DOM文本设置为“mm/dd/yyyy”,这就是我需要更改的文本颜色。
<input type="date"/>
我已经到处搜索了,但找不到如何更改Chrome的shadow DOM输入日期元素文本颜色。大多数占位符都有柔和的灰色,但Chrome的shadow DOM文本是黑色的,当你添加日期时,文本颜色仍然保持不变。 Chrome已经将shadow DOM文本设置为“mm/dd/yyyy”,这就是我需要更改的文本颜色。
<input type="date"/>
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" />
注意:我的第二个示例(带类名的那个)将适用于所有浏览器。
之前已经回答过一个类似的问题,但是对我并没有起作用。
我在这里提供一个非常简单的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}
/>
input[type=time]{
color: blue;
opacity: 34%;
}
input[type=date] {
color: #FFFFFF;
}
placeholder="某个占位符"
) - Adam Jenkins