select下拉框的右边怎么增加提示图标
导读:收集整理的这篇文章主要介绍了select下拉框的右边怎么增加提示图标,觉得挺不错的,现在分享给大家,也给大家做个参考。这次给大家带来select下拉框的右边怎么增加提示图标,select下拉框右边增加提示图标的注意事项有哪些,下面就是实战案...
收集整理的这篇文章主要介绍了select下拉框的右边怎么增加提示图标,觉得挺不错的,现在分享给大家,也给大家做个参考。这次给大家带来select下拉框的右边怎么增加提示图标,select下拉框右边增加提示图标的注意事项有哪些,下面就是实战案例,一起来看一下。本文给大家讲h5、select下拉框右边加图标,深度美化页面增进用户体验效果
1.那么我们先来看一下效果吧!
2.再看看h5的结构:
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>
3.样式部分是用了sass进行控制的,如果不会sass也可以换成css。没有什么特别的运算需要转化,所以换成css也简单
@function REM($n){ @return $n/$REM*1rem; } #LOGin-p{ background: url(../ossweb-img/kuang1.png)0 0 no-repeat; background-size: 100% 100%; width: REM(564); height: REM(531); margin-left: REM(38); .select-wrapper{ posITion: relative; display: flex; justify-content: center; align-items: center; height: REM(50); margin: REM(10) auto; padding-top: REM(15); & > select{ width: REM(458); height: REM(63); padding-left: REM(20); border: 1px solid #23282d; background: #23282d; -webkit-appearance: none; color: #92989f; font-Size: REM(24); margin-top: REM(75); border-radius: 0; z-index:10; } .arrow{ position: absolute; width: REM(41); height: REM(30); top: REM(65); right: REM(80); pointer-events: none; z-index:11; } } #notice{ font-size: REM(20); color: #92989f; text-align: center; margin-top: REM(75); } #comfire1{ width: REM(220); height: REM(78); margin-top: REM(20); margin-left: REM(174); } }
4.解析:主要是.arrow这个元素进行右边那个图标的位置控制。利用position: absolute; 这个属性控制好位置,就基本没有问题了。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
H5实现桌面通知
H5在Canvas中实现自定义路径动画
使用canvas实现视频里的弹幕效果
以上就是select下拉框的右边怎么增加提示图标的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: select下拉框的右边怎么增加提示图标
本文地址: https://pptw.com/jishu/583978.html