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

版权声明:本文为博主原创文章,未经博主允许可以随便转载。

html原生select改造箭头及文字左右居中的一种办法

使用过原生select做网页开发的人,一定会对select的两个问题痛心疾首,一是箭头没办法使用css改造,二是显示文字没办法居中。 首先,如果你有足够时间的话,请改用jquerymobile。jqu...
  • dreamer2020
  • dreamer2020
  • 2016年05月01日 16:56
  • 6723

H5之js拼接select与input的级联

Jquery combobox实现二级级联效果。 最近在通过js中的拼接实现input和select的下拉框级联效果,功夫不负有心人终于可以分享一下自己的劳动成果了。 很简单的应用,如果使...
  • u010158267
  • u010158267
  • 2015年10月12日 22:06
  • 3097

移动端 h5开发相关内容总结——CSS篇

1.移动端开发视窗口的添加h5端开发下面这段话是必须配置的其它相关配置内容如下: width viewport 宽度(数值/device-width) height viewport 高度(数值/de...
  • yisuowushinian
  • yisuowushinian
  • 2016年01月06日 15:59
  • 23377

【HTML5】H5的新标签简介

新标记  HTML5 提供了一些新的元素和属性,例如(网站导航块)和。这种标签将有利于搜索引 擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的 功能,如和标记...
  • u013517797
  • u013517797
  • 2016年03月22日 08:51
  • 4792

H5万能选择器:iosselect

移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示。...
  • cr7villa7owen10
  • cr7villa7owen10
  • 2017年05月03日 13:07
  • 1056

为Html的select option元素添加图案

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

select选择框小插件

  • 2015年06月28日 13:04
  • 350KB
  • 下载

select语句使用大全

  • 2014年03月19日 20:46
  • 27KB
  • 下载

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

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

easyUI中select下拉框添加option选项

使用jquery easyui的下拉列表combobox碰上问题,下拉列表的项都是从 数据库读出来的,然后我想在动态生成的项中添加一项:"=全部="。 但怎么也添加不成功。 首先试了直接用jquer...
  • xiaojian1018
  • xiaojian1018
  • 2015年05月26日 15:22
  • 19450
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:h5、select下拉框右边加图标,深度美化页面增进用户体验
举报原因:
原因补充:

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