关闭

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

标签: HTML5input背景与边框andriodios微信
12779人阅读 评论(8) 收藏 举报
分类:

   前两天在开发在微信访问的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;
}




7
0

猜你在找
深度学习基础与TensorFlow实践
【在线峰会】前端开发重点难点技术剖析与创新实践
【在线峰会】一天掌握物联网全栈开发之道
【在线峰会】如何高质高效的进行Android技术开发
机器学习40天精英计划
Python数据挖掘与分析速成班
微信小程序开发实战
JFinal极速开发企业实战
备战2017软考 系统集成项目管理工程师 学习套餐
Python大型网络爬虫项目开发实战(全套)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    在线交流
    点击这里给我发消息 点击这里给我发消息
    个人资料
    • 访问:270864次
    • 积分:4043
    • 等级:
    • 排名:第7188名
    • 原创:71篇
    • 转载:24篇
    • 译文:0篇
    • 评论:261条
    博客专栏