この記事では主に HTML5 の実装コードを紹介し、[選択] ドロップダウン ボックスの右側にアイコンを追加し、ユーザー エクスペリエンスを向上させるためにページを徹底的に美化します。必要な友人はそれを参照してください。 [選択] ドロップダウン ボックスの右側にアイコンを追加し、ページを徹底的に美化することで、ユーザー エクスペリエンス効果が向上します
1。まず、その効果を見てみましょう。
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>
以上がHTML5、[選択] ドロップダウン ボックスの右側にアイコンを追加するための実装コード (ユーザー エクスペリエンスを向上させるため)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。