前端 自定义下拉列表框

今天在公司里，遇到了一个很简单的问题，有一个UI样式固定的下拉列表框。当我拿到这个ui的时候，第一感觉就是简单的select标签就可以解决问题，但是后面在改样式的过程中，遇到了许许多多的问题，包括无法修改选中后默认的蓝色框，option的hover无法改变等等。。。

在许多次尝试失败后，我决定，定义一个属于自己的下拉列表，当然啦，我并不想用那些组件，虽然用组件很快吧，但是当一个项目中用的组件多了以后，总是会出现好多不可控的因素，相信在座的大牛都比我懂的多，那就开始这次体验吧~~

效果图：

嗯。。学了半天gif图还是不会，等小编以后再补上图，后面有源码，大家直接复制即可。。

理一下思路：

• 通过ul li 俩标签的形式来定义这个列表 显然li中一开始是隐藏的
• li 标签下的就是我们的标签
• ul 标签下我会定义一个div 用来装”请选择一个标签” 之类的默认选项
• 在div 中分为两块 span 和 img
• span 就是文字”请选择一个标签”
• img 则是向下向上的图标
• 点击后，图标会变 span会变 div的边框会变 当然你也可以随意为li（你的标签）添加一些hover样式

因为公司项目中有jquery，所以有部分jquery的代码，当然你想用js原生实现也可以哦
好了，就那么简单，让我们来写一次自己的组件吧

---

html代码

<ul class="dropdown" tabindex="1">
        <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
        <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
            <span>请选择标签</span>
            <div class="dp-img">
                <img src="images/dp-down.png" width="15" height="20">
            </div>
        </div>

        <li class="dp-list hide">标签一</li>
        <li class="dp-list hide">标签二</li>
        <li class="dp-list hide">标签三</li>
        <li class="dp-list hide">标签四</li>
</ul>

简单分析下上述代码，ul，li 结构 下面分为一个<div>和若干个<li>标签。
<div class="dp-select">下有一个<span>用来装默认标签文字，还有一个<div class="dp-img">用来放最右边那个向上和向下的小图标。
<li>就是各位一个个的标签啦，我给它定义了一个‘dp-list’的样式
html就只有那么多了，接下来让我们看看css

css代码

<style>
    .dropdown{
        width: 150px;
        height: 30px;
        line-height: 30px;
        padding:0px;
        cursor: pointer;
        outline: 0;
        border:1px solid #8a8a8a;
    }
    .dropdown .dp-list{
        list-style: none;
        width: 150px;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #8a8a8a;
        border-right: 1px solid #8a8a8a;
        border-bottom: 1px solid #8a8a8a;
        position: relative;
        left: -1px;

    }
    .dropdown .dp-list:hover{
        background: #8a8a8a;
        color: #ffffff;
    }
    .dropdown .dp-img{
        float: right;
        width: 20px;
        height: 30px;
        display: flex;
        justify-content:center;
        align-items:center;
        border-left: 1px solid #8a8a8a;
    }
    .hide {
        display: none;
    }
</style>

css属实没啥好说的，dp-img 也就是我放图标的那个小div,我这里采用的是flex布局，让图标居中。
当然，如果你们想用background使图标居中也没问题啦，个人习惯而已~
hide是我定义的一个隐藏li标签的样式，为了让js代码写的少一些。如果不想写，在js中改成display：none 就可以咯

js代码

<script type="text/javascript">
    $('.dropdown .dp-select').on(