热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《删除type=date的html5输入元素中的默认文本/占位符》经验,为你挑选了3个好方法。

我使用类型为日期的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;
}


推荐阅读
author-avatar
fadsfwebb
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有