Heim > Web-Frontend > H5-Tutorial > Hauptteil

Ausführliche Erklärung zum Entfernen des weißen Hintergrunds und Randes des Eingabefelds auf der mobilen HTML5-Seite (kompatibel mit Android und iOS)

黄舟
Freigeben: 2017-02-22 14:13:10
Original
2266 Leute haben es durchsucht

Vor zwei Tagen habe ich eine HTML5-Seite entwickelt, auf die über WeChat zugegriffen wurde. 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 Rahmen und die Hintergrundfarbe immer noch vorhanden . Später wurde der Stil FILTER: alpha(opacity=0) hinzugefügt und der Rahmen und Hintergrund wurden in Andriod entfernt.

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

Ausführliche Erklärung zum Entfernen des weißen Hintergrunds und Randes des Eingabefelds auf der mobilen HTML5-Seite (kompatibel mit Android und iOS)

JSP-Teil des Codes:

<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>
Nach dem Login kopieren



Eingabe Box-Stilcode:

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


Oben finden Sie eine detaillierte Erklärung, wie Sie den weißen Hintergrund und den weißen Rand des Eingabefelds auf dem Mobiltelefon entfernen HTML5-Seite (kompatibel mit Android und iOS). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!