作者:fadsfwebb | 来源:互联网 | 2023-05-20 17:34
我使用类型为日期的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;
}
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;
}