モバイルHTML5ページの入力ボックスの白背景と枠線を削除する方法を詳しく解説（Android、iOS対応）

2 日前、私は WeChat でアクセスする HTML5 ページを開発していました。時刻を選択する必要がある注文クエリがありました。スタイルを追加せずに 入力ボックスを使用しました。この効果は背景が白で、境界線が醜く、背景全体と完全に一致しません。

入力ボックスの背景色を透明に設定しました (background-color:transparent;)。iOS では背景色と境界線が消えていますが、Android では境界線と背景色がまだ残っています。その後、スタイル FILTER: alpha(opacity=0) が追加され、android では境界線と背景が削除されました。

背景と境界線を削除すると、以前よりも見栄えがよくなりますが、タイプが日付であるため、右側にアイコンがあり、外観:none スタイルのアイコンがなくなったので、以前よりも見栄えが良くなります。下の写真はその効果です:



jsp コードの一部:

<p>  
            <img  src="/static/imghwm/default1.png"  data-src="<c:url value="  class="lazy"  /images/weixin/timeQ.png"/ alt="モバイルHTML5ページの入力ボックスの白背景と枠線を削除する方法を詳しく解説（Android、iOS対応）" >" class="imgCen" onclick="updateDate(-1);"/>  
            <input type="date" name="queryDate" id="queryDate" value="" onchange="changeDate();"/>   
            <img  src="/static/imghwm/default1.png"  data-src="<c:url value="  class="lazy"  /images/weixin/timeH.png"/ alt="モバイルHTML5ページの入力ボックスの白背景と枠線を削除する方法を詳しく解説（Android、iOS対応）" >" class="imgCen" onclick="updateDate(1);"   style="max-width:90%"/>  
        </p>

入力ボックスのスタイルコード:

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

上記は、白い背景と削除の詳細な説明ですモバイル HTML5 ページの入力ボックスの境界線 (Android および iOS と互換性のある) コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。