详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)


Posted in HTML / CSS onDecember 15, 2016

前两天在开发在微信访问的HTML5页面,里面有个订单查询要选择时间,刚开始使用的<input type="date">输入框,没加任何的样式,效果是白色的背景再加上边框很丑,完全与整个背景不协调。

刚开始设置了输入框背景色透明(background-color:transparent;),在iOS上面背景色和边框都没有了,但是在andriod上边框和背景色还是存在。后来加上样式FILTER: alpha(opacity=0),在andriod中就去掉了边框和背景。

去掉背景和边框比以前好看多了,但是因为类型是date,所以右边有个图标,感觉不协调,加上appearance:none;样式图标没了,比以前更好看了。下图是效果:

详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)

jsp 部分代码:

<div>  
            <img src="<c:url value="/images/weixin/timeQ.png"/>" class="imgCen" onclick="updateDate(-1);"/>  
            <input type="date" name="queryDate" id="queryDate" value="" onchange="changeDate();"/>   
            <img src="<c:url value="/images/weixin/timeH.png"/>" class="imgCen" onclick="updateDate(1);" style="margin-left: -8px;"/>  
        </div>

输入框样式代码:

.date input[type=date] {  
    background-color:transparent;  
    color:#fff;  
    FILTER: alpha(opacity=0); /*androd*/  
    appearance:none;  /*下拉框去掉右侧图标*/  
    -moz-appearance:none;  
    -webkit-appearance:none;  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 #HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 #HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 #HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 #HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 #HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 #HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 #HTML / CSS
You might like
php自定义session示例分享
2014/04/22 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php面向对象重点知识分享
2019/09/27 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
Prototype使用指南之range.js
2007/01/10 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
详解JavaScript树结构
2017/01/09 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
bootstrap Table的一些小操作
2017/11/01 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
Python入门之三角函数全解【收藏】
2017/11/08 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
小学毕业演讲稿
2014/04/25 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
2014年村官工作总结
2014/11/24 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
中学政教处工作总结
2015/08/13 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
python自动化八大定位元素讲解
2021/07/09 Python