详解移动端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 03 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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_start()问题解疑(详细介绍)
2013/07/05 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
如何编写高质量JS代码
2014/12/28 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python实现在windows下操作word的方法
2015/04/28 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
python虚拟环境迁移方法
2019/01/03 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
Python如何发送与接收大型数组
2020/08/07 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
为什么使用接口?
2014/08/13 面试题
函授本科自我鉴定
2013/11/03 职场文书
保荐人的岗位职责
2013/11/19 职场文书
展会邀请函范文
2014/01/26 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL