删除 type=date 的 html5 输入元素中存在的默认文本/占位符

Question

我正在使用类型为日期的 html 输入元素，

 <input type="date">

当我使用上面的元素时，它会在该输入元素中创建默认日期格式，即 mm/dd/yyyy 文本。如何删除此默认文本？

我尝试在我的页面上添加以下样式，但它也隐藏了选定的日期值，

 input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

原文由 Sreekanth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

原文由 Steffi A. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

可能的选择

HTML:

 <input type='date' required>

CSS：

 input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}

原文由 Kenneth 发布，翻译遵循 CC BY-SA 3.0 许可协议