HTML5、[選択] ドロップダウン ボックスの右側にアイコンを追加するための実装コード (ユーザー エクスペリエンスを向上させるため)

不言
リリース: 2018-06-05 15:03:44
オリジナル
3543 人が閲覧しました

この記事では主に HTML5 の実装コードを紹介し、[選択] ドロップダウン ボックスの右側にアイコンを追加し、ユーザー エクスペリエンスを向上させるためにページを徹底的に美化します。必要な友人はそれを参照してください。 [選択] ドロップダウン ボックスの右側にアイコンを追加し、ページを徹底的に美化することで、ユーザー エクスペリエンス効果が向上します

1。まず、その効果を見てみましょう。


HTML5、[選択] ドロップダウン ボックスの右側にアイコンを追加するための実装コード (ユーザー エクスペリエンスを向上させるため)
HTML5、[選択] ドロップダウン ボックスの右側にアイコンを追加するための実装コード (ユーザー エクスペリエンスを向上させるため)2. スタイル部分は sass によって制御されます。そうしないとSass を知っていれば、CSS に置き換えることができます。変換する必要のある特別な操作がないため、css に簡単に切り替えることができます

<p id="login-p">
                <p class="select-wrapper">
                    <select id="selector1">
                        <option value="" disabled selected>请选择系统:</option>
                        <option value="1">微信-苹果</option>
                        <option value="2">微信-安卓</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </p>
                <p class="select-wrapper">
                    <select id="selector2">
                        <option value="" disabled selected>请选择渠道:</option>
                        <option value="1">渠道1</option>
                        <option value="2">渠道2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </p>
                <p class="select-wrapper">
                    <select id="selector3">
                        <option value="" disabled selected>请选择大区:</option>
                        <option value="1">大区1</option>
                        <option value="2">大区2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </p>
                <p class="select-wrapper">
                    <select id="selector4">
                        <option value="" disabled selected>请选择角色:</option>
                        <option value="1">角色1</option>
                        <option value="2">角色2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </p>
                <p id="notice">单个帐号只能领取一次奖励</p>
                <img src="ossweb-img/comfire1.png" alt="" id="comfire1"/>
            </p>
ログイン後にコピー

4. 分析: 主に、.arrow 要素は右側のアイコンの位置を制御します。位置の制御にはposition:Absolute;を使用すれば基本的には問題ありません。

以上がHTML5、[選択] ドロップダウン ボックスの右側にアイコンを追加するための実装コード (ユーザー エクスペリエンスを向上させるため)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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