Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-03-22 11:09:54
Original
5620 Leute haben es durchsucht

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:

Entfernen Sie den weißen Hintergrund und den Rand 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"/ 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="<c:url value="/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>
Nach dem Login kopieren
Eingabefeld-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
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?

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