h5、select下拉框右边加图标，深度美化页面增进用户体验

h5、select下拉框右边加图标，深度美化页面增进用户体验
1.那么我们先来看一下效果吧！

2.再看看h5的结构：

<div id="login-div"><div 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" /></div><div 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" /></div><div 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" /></div><div 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" /></div><p id="notice">单个帐号只能领取一次奖励</p><img src="ossweb-img/comfire1.png" alt="" id="comfire1"/></div>

3.样式部分是用了sass进行控制的，如果不会sass也可以换成css。没有什么特别的运算需要转化，所以换成css也简单

    @function REM($n){@return $n/$REM*1rem;}#login-div{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、select下拉框右边加图标，深度美化页面增进用户体验相关推荐

html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
设置select下拉框不可修改的→“四”←种方法
设置select下拉框为不可修改的几种方法: 因为select的特殊性,导致它不能像input表单一样简单地设置一个readonly来限制修改,所以,我们需要进行别的操作! 1.为下拉框添加样式,可以 ...
select下拉框兼容写法
去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的sele ...
layui给select下拉框赋值
layui给select下拉框赋值 //重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.fo ...
iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) ...
layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
select下拉框美化
http://dl.dbank.com/c04csxtesr 基本用法单选下拉框的写法与传统的一样.支持TAB键打开和上下箭头选择option.支持onchange事件,见下面选中项:2 代码如下 ...
iview select 怎么清空_如何解决iview 的select下拉框选项错位的问题，具体操作如下...
下面我就为大家分享一篇完美解决iview 的select下拉框选项错位的问题,具有很好的参考价值,希望对大家有所帮助. 在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉 ...
c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...

h5、select下拉框右边加图标，深度美化页面增进用户体验

h5、select下拉框右边加图标，深度美化页面增进用户体验相关推荐

最新文章

热门文章