Remove the white background and border of the input box on the mobile HTML5 page (compatible with Android and ios)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Remove the white background and border of the input box on the mobile HTML5 page (compatible with Android and ios)

黄舟

Mar 22, 2017 am 11:09 AM

html5 background frame

Two days ago, I was developing an HTML5 page accessed on WeChat. There was an order query that required selecting a time. The input box I just used did not add any styles, and the effect was white. The background and the border are ugly and completely inconsistent with the entire background.

I just set the background color of the input box to be transparent (background-color:transparent;). On iOS, the background color and border are gone, but on Android, the border and background color still exist. Later, the style FILTER: alpha(opacity=0) was added, and the border and background were removed in andriod.

It looks much better after removing the background and borders, but because the type is date, there is an icon on the right, which feels uncoordinated. With the appearance:none; style icon gone, it looks better than before. The picture below is the effect:

Remove the white background and border of the input box on the mobile HTML5 page (compatible with Android and ios)

jsp Part of the code:

<p>  
            <img  src="/static/imghw/default1.png"  data-src="<c:url value="  class="lazy"  /images/weixin/timeQ.png"/ alt="Remove the white background and border of the input box on the mobile HTML5 page (compatible with Android and ios)" >" class="imgCen" onclick="updateDate(-1);"/>  
            <input type="date" name="queryDate" id="queryDate" value="" onchange="changeDate();"/>   
            <img  src="/static/imghw/default1.png"  data-src="<c:url value="  class="lazy"  /images/weixin/timeH.png"/ alt="Remove the white background and border of the input box on the mobile HTML5 page (compatible with Android and ios)" >" class="imgCen" onclick="updateDate(1);"   style="max-width:90%"/>  
        </p>

Copy after login

Input box style code:

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

Copy after login

The above is the mobile HTML5 page Remove the white background and border of the input box (compatible with Android and ios). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Mobile terminal HTML5 performance optimization

How to develop mobile terminal HTML5? What is the difference from the PC version?

Mobile HTML5 applications, do users really need them? If so, what are the demand scenarios?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn