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

原创 2017年10月16日 10:20:19

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;这个属性控制好位置,就基本没有问题了。

版权声明:可以转发 https://blog.csdn.net/a419419/article/details/78246965

h5修改移动端date默认右侧图标

.date input[type=date] {      background-color:transparent;      color:#fff;      FILTER: alpha(opac...
  • baidu_38027860
  • baidu_38027860
  • 2018-03-15 10:07:41
  • 52

h5学习笔记: 下拉菜单

鼠标经过菜单的时候,下拉菜单形成起来。这个案例中,有一些比较有趣的事情。首先要了解这种菜单设计结构。我们知道ul+li经常组合列表,这种列表既有纵向,也有横向。列表中的li元素,再包一个ul+li的组...
  • hero82748274
  • hero82748274
  • 2016-08-24 11:50:28
  • 6365

Bootstrap手机端下拉菜单(铺满)

Bootstrap下拉菜单铺满
  • Bug_money
  • Bug_money
  • 2016-11-11 21:27:57
  • 400

自定义带图标的select,只需把图标地址写在option的title属性中即可

  • 2010年07月15日 10:46
  • 91KB
  • 下载

CSS3 中关于 select 下拉列表的样式

http://www.oschina.net/code/snippet_12_46548 代码片段(2)[全屏查看所有代码] 1. [图片] Styling_SELECT.jp...
  • u011537073
  • u011537073
  • 2016-03-24 00:32:37
  • 2276

为Html的select option元素添加图案

在Html中,select的some text标签中是不能加任何子标签的,比如span、img等等,那么是不是就只能是纯文字呢? 经过一段时间的研究,其实还是可以用font-awesome、glyph...
  • zhbzhbzhbz
  • zhbzhbzhbz
  • 2017-02-21 00:34:35
  • 1088

在网页中实现icon小图标的几种方法

总所周知,网页的美观程度往往比这个网页的使用程度更重要,因为它能直接吸引用户的眼球。在网页中,小图标在美工方面的作用更是不言而喻,小图标种类多样,给人以直观的反映。在现有的网站中,99.9%的网站都采...
  • u010499087
  • u010499087
  • 2015-01-08 09:44:23
  • 22029

JS组件系列——Bootstrap Select2组件使用小结

前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到...
  • doc_wei
  • doc_wei
  • 2016-12-21 13:16:40
  • 941

去掉select右边的默认图标

-webkit-appearance: none;appearance: none;
  • qq_28556553
  • qq_28556553
  • 2015-06-26 18:24:47
  • 886
收藏助手
不良信息举报
您举报文章:h5、select下拉框右边加图标,深度美化页面增进用户体验
举报原因:
原因补充:

(最多只允许输入30个字)