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

我使用类型为日期的html输入元素,

当我使用上面的元素时,它会在该输入元素中创建一个默认的日期格式,即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;
}

小智.. 14

::-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;
}

或另一个答案`` (8认同)

不适用于Chrome 51.0.2704.103,Mac OS El Capitan.http://take.ms/P7SSK有什么想法吗？ (8认同)

---

Robin Carlo .. 10

接受的答案似乎不再适用于最新的Chrome版本.在版本50.0.2661.102上测试它并且不起作用.

通过添加此代替:

.mdl-textfield:not(.is-dirty) input::-webkit-datetime-edit {
     color: transparent; 
}

input:focus::-webkit-datetime-edit {
    color: rgba(255, 255, 255, .46) !important; 
}

工作样本

资源

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;
}

---

或另一个答案``

---

不适用于Chrome 51.0.2704.103,Mac OS El Capitan.http://take.ms/P7SSK有什么想法吗？

2> Robin Carlo ..：

---

接受的答案似乎不再适用于最新的Chrome版本.在版本50.0.2661.102上测试它并且不起作用.

通过添加此代替:

.mdl-textfield:not(.is-dirty) input::-webkit-datetime-edit {
     color: transparent; 
}

input:focus::-webkit-datetime-edit {
    color: rgba(255, 255, 255, .46) !important; 
}

工作样本

资源

---

这似乎使得该值即使在设置时也会消失(chrome 54)

3> 小智..：

---

可能的选择

HTML:

CSS:

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