Select2 下拉选择框的样式

Posted 2023-05-07

【中文标题】Select2 下拉选择框的样式

【英文标题】：Styling of Select2 dropdown select boxes

【发布时间】：2014-08-12 09:30:42

【问题描述】：

我在一个项目中使用 Select2 为搜索表单中的一些选择框设置样式。我设法将箭头容器的渐变背景更改为黑色渐变：

.select2-container .select2-choice .select2-arrow 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);

我希望箭头是白色的，但不幸的是，Select2 为不同的图标使用了背景图像，而不是 font-awesome 或类似的东西，所以没有办法只用 CSS 改变颜色。

使箭头变为白色而不是默认灰色的最简单方法是什么？我真的必须用我自己的替换背景 png（select2.png 和 select2x2.png）吗？还是有更简单的方法？

我的另一个问题是如何更改选择框的高度。我知道如何在打开状态下更改下拉框的高度，但我想在关闭状态下更改选择框的高度。有什么想法吗？

【问题讨论】：

第二个问题，看这里：***.com/questions/2547354/…

更改背景图片颜色的最简单方法是使用您自己的图片，是的

【参考方案1】：

感谢 cmets 的建议。我做了一些肮脏的黑客攻击来获得我想要的东西，而无需创建自己的图像。使用 javascript，我首先隐藏用于向下箭头的默认标记，如下所示：

$('b[role="presentation"]').hide();

然后我在我的页面中添加了 font-awesome 并添加了我自己的向下箭头，再次使用一行 javascript，以替换默认的：

$('.select2-arrow').append('<i class="fa fa-angle-down"></i>');

然后使用 CSS 设置选择框的样式。我设置了高度，将箭头区域的背景颜色更改为渐变黑色，将宽度、字体大小以及向下箭头的颜色更改为白色：

.select2-container .select2-choice 
    padding: 5px 10px;
    height: 40px;
    width: 132px; 
    font-size: 1.2em;  


.select2-container .select2-choice .select2-arrow 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
    width: 40px;
    color: #fff;
    font-size: 1.3em;
    padding: 4px 12px;

结果就是我想要的样式：

2015 年 5 月 6 日更新 正如@Katie Lacy 在另一个答案中提到的那样，Select2 的第 4 版中的类名已更改。带有新类名的更新后的 CSS 应如下所示：

.select2-container--default .select2-selection--single
    padding:6px;
    height: 37px;
    width: 148px; 
    font-size: 1.2em;  
    position: relative;


.select2-container--default .select2-selection--single .select2-selection__arrow 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
    width: 40px;
    color: #fff;
    font-size: 1.3em;
    padding: 4px 12px;
    height: 27px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;

JS：

$('b[role="presentation"]').hide();
$('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');

【讨论】：

我似乎无法让这个工作，你能尝试发布一个活生生的例子，好吗？谢谢。

重要的是要提到 v4 中的类名已更改，正如另一个答案指出的那样，但这个逻辑仍然有效。

【参考方案2】：

这是上面的一个工作示例。 http://jsfiddle.net/z7L6m2sc/ 现在 select2 已经更新，类有变化可能是你无法让它工作的原因。这是css....

.select2-dropdown.select2-dropdown--below
    width: 148px !important;


.select2-container--default .select2-selection--single
    padding:6px;
    height: 37px;
    width: 148px; 
    font-size: 1.2em;  
    position: relative;


.select2-container--default .select2-selection--single .select2-selection__arrow 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
    width: 40px;
    color: #fff;
    font-size: 1.3em;
    padding: 4px 12px;
    height: 27px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;

【参考方案3】：

这就是我更改占位符箭头颜色的方式，2 个类用于下拉打开和下拉关闭，您需要将#fff 更改为您想要的颜色：

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b 
    border-color: transparent transparent #fff transparent !important;
  
  .select2-container--default .select2-selection--single .select2-selection__arrow b 
    border-color: #fff transparent transparent transparent !important;
  

【讨论】：

虽然这只是部分回答了这个问题，但您的解决方案对我和每个只需要更改箭头颜色以匹配页面样式的人来说都是完美的。感谢您的样式。