详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
导读:收集整理的这篇文章主要介绍了详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios),觉得挺不错的,现在分享给大家,也给大家做个参考。 前两天在开发在微信访问的HTML5页面,里面有个订单查询要...
收集整理的这篇文章主要介绍了详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios),觉得挺不错的,现在分享给大家,也给大家做个参考。 前两天在开发在微信访问的HTML5页面,里面有个订单查询要选择时间,刚开始使用的input tyPE="date"> 输入框,没加任何的样式,效果是白色的背景再加上边框很丑,完全与整个背景不协调。
刚开始设置了输入框背景色透明(background-color:transparent; ),在iOS上面背景色和边框都没有了,但是在andriod上边框和背景色还是存在。后来加上样式FILTER: alpha(opacITy=0),在andriod中就去掉了边框和背景。
去掉背景和边框比以前好看多了,但是因为类型是date,所以右边有个图标,感觉不协调,加上appearance:none;
样式图标没了,比以前更好看了。下图是效果:
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
本文地址: https://pptw.com/jishu/585629.html