input type date 解决移动端显示placeholder.
来源:互联网 发布:cda数据分析师考试地点 编辑:程序博客网 时间:2024/05/19 21:40
网上找的方法苹果可以了 安卓显示总有问题.
加了段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即可解决.
0 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的问题)
- java开发接口利用http协议传输数据
- HTTP协议概述
- 网站开发流程以及HTML5简介(八)
- MYSQL的安装配置系列问题
- 9. Optimizing and satisficing metrics 优化指标和满足指标(《MACHINE LEARNING YEARNING》翻译)
- input type date 解决移动端显示placeholder.
- SQL 查询当天、本周、本月记录
- Linux随机数nonblocking pool快速初始化
- plist存储(读取/写入)
- 安卓中自定义简单的组合控件
- Android加密之Md5,AES 加密
- [真格邦]MyEclipse自动补全设置
- web
- 18.Spring学习笔记_切面的优先级(by尚硅谷_佟刚)