select2插件使用及样式修改

jiajia佳佳

已于 2022-10-28 11:48:37 修改

阅读量3.5k

点赞数 2

分类专栏： select2 文章标签： html5

于 2022-10-28 11:47:26 首次发布

本文链接：https://blog.csdn.net/qq_43486404/article/details/127567310

版权

select2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、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; }