详解移动端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 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python中类的继承代码实例
2014/10/28 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
python之PyMongo使用总结
2017/05/26 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
鉴定评语大全
2014/05/05 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
使用CSS连接数据库的方式
2022/02/28 HTML / CSS