移动端H5页面端怎样除去input输入框的默认样式

来源：动视网责编：小采时间：2020-11-27 15:06:06

移动端H5页面端怎样除去input输入框的默认样式

移动端H5页面端怎样除去input输入框的默认样式:这次给大家带来移动端H5页面端怎样除去input输入框的默认样式，移动端H5页面端除去input输入框的默认样式的注意事项有哪些，下面就是实战案例，一起来看一下。前两天在开发在微信访问的HTML5页面，里面有个订单查询要选择时间，刚开始使用的<inpu

推荐度：

点击下载本文 文档为doc格式

导读移动端H5页面端怎样除去input输入框的默认样式:这次给大家带来移动端H5页面端怎样除去input输入框的默认样式，移动端H5页面端除去input输入框的默认样式的注意事项有哪些，下面就是实战案例，一起来看一下。前两天在开发在微信访问的HTML5页面，里面有个订单查询要选择时间，刚开始使用的<inpu

这次给大家带来移动端H5页面端怎样除去input输入框的默认样式，移动端H5页面端除去input输入框的默认样式的注意事项有哪些，下面就是实战案例，一起来看一下。

前两天在开发在微信访问的HTML5页面，里面有个订单查询要选择时间，刚开始使用的<input type="date">输入框，没加任何的样式，效果是白色的背景再加上边框很丑，完全与整个背景不协调。

刚开始设置了输入框背景色透明（background-color:transparent;），在iOS上面背景色和边框都没有了，但是在andriod上边框和背景色还是存在。后来加上样式FILTER: alpha(opacity=0)，在andriod中就去掉了边框和背景。

去掉背景和边框比以前好看多了，但是因为类型是date,所以右边有个图标，感觉不协调，加上appearance:none;样式图标没了，比以前更好看了。下图是效果：

jsp 部分代码：

<p> 
 <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;"/> 
 </p>

输入框样式代码：

.date input[type=date] { 
 background-color:transparent; 
 color:#fff; 
 FILTER: alpha(opacity=0); /*androd*/ 
 appearance:none; /*下拉框去掉右侧图标*/ 
 -moz-appearance:none; 
 -webkit-appearance:none; 
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

移动端H5页面端怎样除去input输入框的默认样式

推荐度：

点击下载本文 文档为doc格式

标签：默认 html5 HTML5页面

热门焦点

移动端H5页面端怎样除去input输入框的默认样式

移动端H5页面端怎样除去input输入框的默认样式

移动端H5页面端怎样除去input输入框的默认样式

最新推荐

猜你喜欢

热门推荐