select2插件使用及样式修改

一、select2插件使用

1、引入相关文件
引入select2.min.js、select2.min.css和jquery文件
2、使用
html文件：<select id="select2id"><option></option></select>
js文件：$("#select2id").select2();
3、展示

注：select2插件可以搜索下拉框的内容（适合选项特别多的情况）

二、样式修改

1、下拉区域背景颜色
此例中设置成灰色

.select2-drop-active{
            background-color:rgba(0,0,0,.3) !important;
        }

2.显示框文字样式

.select2-container .select2-choice>.select2-chosen {
    text-align:center;
    color:#29f;
}

注：此处是以文字居中和颜色为例，其它文字样式都可以在此处修改
3.显示框颜色

.select2-container .select2-choice {
            color:#29f;
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#00070d),color-stop(0.5,#00070d));
            border-radius: 0px;
            border: 1px solid #29f;
        }

注：以背景颜色为例
4、显示框小图标

.select2-container .select2-choice abbr {
            background: url(select2.png) right top no-repeat;
        }

注：select2.png就是显示的下三角图标，想要更换图标可以改成自己路径下的图片名称
5、显示框样式

.select2-container .select2-choice .select2-arrow {
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#00070d),color-stop(0.6,#00070d));
            border: 1px solid #29f;
        }

注：以背景颜色和边框为例
6、下拉区域字体

.select2-drop{
            color:red;
        }

7、下拉区域输入框

.select2-search input {
    background: url(./js/jquery/select2/select2.png) no-repeat 100% -22px,-webkit-gradient(linear,left bottom,left top,color-stop(0.85,#4784b9),color-stop(0.99,#2e81c9));

注：可以修改图片
8、下拉选中区域

.select2-results .select2-highlighted {
            background: #29f;
        }

9、下拉区域宽度修改（不与显示区域一样大小）
动态更改下拉区域尺寸
js:$("#select2id").select2({dropdownCssClass:'bigdrop'});
css:.bigdrop { width:19rem !important; }