input type date 解决移动端显示placeholder.
来源:互联网 发布:淘宝客服基础培训知识 编辑:程序博客网 时间:2024/06/07 23:18
网上找的方法苹果可以了 安卓显示总有问题.
加了段CSS就完美解决了,就是UC有点奇葩
以下是我测试的浏览器:
微信--OK.
QQ浏览器--OK
谷歌浏览器--OK
UC浏览器(业界奇葩),前面会有空白
css
input[type="date"]:before{
color:#A9A9A9;
content:attr(placeholder);
}
input[type="date"].full:before {
color:black;
content:""!important;
}
js
$("#date").on("input",function(){
if($(this).val().length>0){
$(this).addClass("full");
}
else{
$(this).removeClass("full");
}
});
html
<input id="date" class="weui_input" type="date" placeholder="请选择出生日期" style="height:41px;overflow: hidden;">
这里说明一下, input不设置高度的话在安卓下会placeholder 跟date 同时显示 而且显示两行, 限制高度加overflow即可解决.
1 0
- input type date 解决移动端显示placeholder.
- input type date 解决移动端显示placeholder.
- 移动端HTML5 date不支持placeholder问题
- 移动端 华为手机 input中placeholder垂直居中失效
- Android 4.1.2 input type number时placeholder不显示的问题
- 使input date支持placeholder方法
- 移动端<input type = "number">问题
- 手机端时间选择器慢input type="date"
- input默认显示字体,placeholder的用法
- 解决ie9以下input 无placeholder问题
- html5 input type date default value
- type=‘date’的input标签
- input[type="date"]默认样式修改
- input[type=date]默认样式修改
- input[type="date"]默认样式修改
- 58 css 改变input type=file样式 placeholder属性
- input placeholder
- 移动端限制两位小数并且弹出数字键盘(解决使用H5S使用input[type='number']不兼容JS的问题)
- 用hash解决微信开发无刷新切换页面返回时滚动条会回到顶部
- A first chance exception of type 'System.NullReferenceException' occurred发生的时候你确实是遇到了Bug
- 四,细说 HTML5 之 新增的非主题结构元素
- 发现一个学习Liberty的好地方,记录一下
- 自定义实现跑马灯
- input type date 解决移动端显示placeholder.
- 《蟾宫曲》
- redis问题总汇
- [OC]之 atomic 与 nonatomic的区别
- retrofit2拦截器和请求封装
- 【Leetcode】:238. Product of Array Except Self 问题 in JAVA
- KMP算法学习文档
- 秒杀系统架构分析与实战
- Spring事务管理