Question

我在项目中使用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正在使用不同图标的背景图像而不是字体 - 真棒或类似的东西，所以没有办法只用CSS改变颜色。

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

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

Answer 1

感谢评论中的建议。我做了一些肮脏的黑客来得到我想要的东西而不必创建我自己的图像。使用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;
}

结果就是我想要它的样式：

screenshot

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>');

Answer 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;
}

Answer 3

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

func scalePath()->CGPath{
    var scaleTransform =  CGAffineTransform.identity.translatedBy(x: -150, y: -150)
    scaleTransform = scaleTransform.scaledBy(x: 10, y: 10)
    let newPath = path?.copy(using: &scaleTransform)

    return newPath!
}

Select2下拉选择框的样式

3 个答案: