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和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 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中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python笔记(叁)继续学习
2012/10/24 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python Socket编程详细介绍
2017/03/23 Python
Python的语言类型(详解)
2017/06/24 Python
python实现简单http服务器功能
2018/09/17 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
学校岗位设置方案
2014/01/16 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
大学课外活动总结
2014/07/09 职场文书
挂职学习心得体会
2014/09/09 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android