ホームページ > ウェブフロントエンド > H5 チュートリアル > モバイル HTML5 ページの入力ボックスの白い背景と枠線を削除します (Android および iOS と互換性があります)。

モバイル HTML5 ページの入力ボックスの白い背景と枠線を削除します (Android および iOS と互換性があります)。

黄舟
リリース: 2017-03-22 11:09:54
オリジナル
5665 人が閲覧しました

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"/ alt="モバイル HTML5 ページの入力ボックスの白い背景と枠線を削除します (Android および 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="モバイル 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で入力ボックスの白い背景と境界線を削除する内容です詳細については、PHP 中国語 Web サイト (m.sbmmt.com) をご覧ください。

関連記事:

モバイル HTML5 パフォーマンスの最適化

モバイル HTML5 を開発するにはどうすればよいですか? PC版との違いは何ですか?

モバイル HTML5 アプリケーション、ユーザーは本当にそれを必要としていますか?もしそうなら、需要シナリオは何ですか?

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート