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 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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中str_replace函数使用小结
2008/10/11 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
js实现进度条的方法
2015/02/13 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python中MySQLdb模块用法实例
2014/11/10 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
Python文件操作的面试题
2013/06/22 面试题
环保专业大学生职业规划设计
2014/01/10 职场文书
学风建设演讲稿
2014/09/12 职场文书
城管年度个人总结
2015/02/28 职场文书