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

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

黄舟

リリース： 2017-02-22 14:13:10

オリジナル

2279 人が閲覧しました

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

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

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

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

jsp コードの一部:

<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>

ログイン後にコピー

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

.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 サイト (m.sbmmt.com) に注目してください。