HTML5、Select下拉框右边加图标的实现代码(增进用户体验)


Posted in HTML / CSS onOctober 16, 2017

本文给大家讲h5、select下拉框右边加图标,深度美化页面增进用户体验效果

1.那么我们先来看一下效果吧! 
 

HTML5、Select下拉框右边加图标的实现代码(增进用户体验) 
HTML5、Select下拉框右边加图标的实现代码(增进用户体验) 

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

总结

以上所述是小编给大家介绍的HTML5、Select下拉框右边加图标的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 #HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 #HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 #HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 #HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 #HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 #HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 #HTML / CSS
You might like
PHP 柱状图实现代码
2009/12/04 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
html超链接打开窗口大小的方法
2013/03/05 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python绘图方法实例入门
2015/05/19 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Django中Middleware中的函数详解
2019/07/18 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
详解Python 函数参数的拆解
2020/09/02 Python
python之随机数函数的实现示例
2020/12/30 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
中学生学雷锋活动心得体会
2014/03/10 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
校车司机安全责任书
2015/05/11 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python