详解移动端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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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中的MVC模式运用技巧
2007/05/03 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python中str.format()详解
2017/03/12 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
更新修改后的Python模块方法
2019/03/03 Python
python 代码运行时间获取方式详解
2020/09/18 Python
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
西门豹教学反思
2014/02/04 职场文书
党员群众路线承诺书
2014/05/20 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
安全保证书怎么写
2015/02/28 职场文书
追悼会答谢词范文
2015/09/29 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书