详解挪动端HTML5网页页面端去掉input键入框的白色

日期:2020-10-11 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

前两天在开发设计在手机微信浏览的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(⑴);"/>  
            <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: ⑻px;"/>  
        </div>  

键入框款式编码:

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

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。