Select2下拉选择框的样式设计

Question

Select2下拉选择框的样式设计

28

我在一个项目中使用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）吗？还是有更简单的方法？

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

- Ruben

2

对于你的第二个问题，请看这里：https://dev59.com/V3E85IYBdhLWcg3w64EA - s0h3ck

最简单的更改背景图像颜色的方法是使用您自己的图像。 - Zach Saucier

3个回答

12

这里是上述内容的工作示例。 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;
}

- Katie

5

这是我如何更改占位符箭头颜色的方法，这两个类分别用于下拉菜单打开和关闭时，您需要将 #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;
  }

- lucasumberto

1

尽管这只是对问题的部分回答，但您的解决方案对我和所有仅需要更改箭头颜色以匹配页面样式的人来说都非常完美。感谢您提供的样式。 - azakgaim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ruben · Accepted Answer

感谢评论中的建议。我使用了一种不太正规的方法，以便在不创建自己的图像的情况下获得所需内容。使用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>');