input type="datetime-local" 时placeholder不显示

最新推荐文章于 2024-10-11 14:35:54 发布

转载最新推荐文章于 2024-10-11 14:35:54 发布 · 695 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jyichen/p/5760646.html

本文介绍了一种解决在移动端使用datetime-local输入类型时，因原生提示信息不显示而导致用户体验不佳的方法。通过CSS伪元素:before来实现自定义提示信息，改善了iOS设备上的显示效果，但安卓设备仍存在问题。

一个坑，input的type="datetime-local" 时，电脑上会显示提示，如图

但是，手机上不会显示，就是一片白，加上placeholder也是白费。

添上这段代码，亲测ios可以正常提示提示信息，安卓还是一片白。

input[type="datetime-local"]:before{
    content: '填写预约时间';
    color: #a9a9a9;
    text-align: left;
    width:100%;

}
input[type="datetime-local"]:active:before, input[type="datetime-local"]:hover:before, input[type="datetime-local"]:visited:before,  input[type="datetime-local"]:focus:before{
    content: '';
    width: 100%;
}