Entfernen Sie den weißen Hintergrund und den Rand des Eingabefelds auf der mobilen HTML5-Seite (kompatibel mit Android und iOS).

Vor zwei Tagen habe ich eine HTML5-Seite entwickelt, auf die ich über WeChat zugegriffen habe. Es gab eine Bestellabfrage, die die Auswahl einer Zeit erforderte. Das

Ich habe einfach die Hintergrundfarbe des Eingabefelds auf transparent eingestellt (background-color:transparent;) Unter iOS sind die Hintergrundfarbe und der Rand verschwunden, aber unter Android sind der Rand und der Hintergrund verschwunden Farbe ist noch vorhanden. Später wurde der Stil FILTER: alpha(opacity=0) hinzugefügt und der Rahmen und Hintergrund wurden in Andriod entfernt.

Nach dem Entfernen des Hintergrunds und der Ränder sieht es viel besser aus als zuvor, aber da es sich bei dem Typ um Datum handelt, befindet sich auf der rechten Seite ein Symbol, das sich unkoordiniert anfühlt sieht besser aus als vorher. Das Bild unten zeigt den Effekt:

JSP-Teil des Codes:

<p>  
            <img  src="/static/imghw/default1.png"  data-src="<c:url value="  class="lazy"  /images/weixin/timeQ.png"/ alt="Entfernen Sie den weißen Hintergrund und den Rand des Eingabefelds auf der mobilen HTML5-Seite (kompatibel mit Android und 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="Entfernen Sie den weißen Hintergrund und den Rand des Eingabefelds auf der mobilen HTML5-Seite (kompatibel mit Android und iOS)." >" class="imgCen" onclick="updateDate(1);"   style="max-width:90%"/>  
        </p>

Eingabefeld-Stilcode:

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

Das Obige ist mobil. Entfernen Sie den weißen Hintergrund und den Rand des Eingabefelds auf der HTML5-Seite (kompatibel mit Android und iOS). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Verwandte Artikel:

Mobile HTML5-Leistungsoptimierung

Wie entwickelt man mobiles HTML5? Was ist der Unterschied zur PC-Version?

Benötigen Benutzer wirklich mobile HTML5-Anwendungen? Wenn ja, welche Nachfrageszenarien gibt es?