logo标签列表

Select2没有显示向下箭头图标。

javascriptjquerycssjquery-select2
24

我的select2完美地运行了，只有一个小错误，选择框中的向下箭头图标没有显示出来，你们知道是为什么吗？

Example

这让用户有点困惑。我尝试找错误，但无法修复该错误，你们能否帮助我？代码在这里不起作用，但在jsfiddle链接中可以正常工作。
jsfiddle链接：http://jsfiddle.net/yszv1ob2/ 

$("#e1").select2();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">

<select multiple id="e1" style="width:300px">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>

7个回答
40

对于Select2版本4.0.5及以上，此代码完全复制了单选箭头。

.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
2
在最新版本中表现最佳。 - arefindev
谢谢！这很完美地起作用了。 如果你想在选择框打开时添加一个上下颠倒的按钮，你可以添加以下内容：.select2-container--open .select2-selection--multiple:before { border-top:0; border-bottom: 5px solid #888; } - Mike
26

您已经使用了多选下拉框，并且使用了插件（Select2），在多选下拉框中不添加下拉箭头。因此，如果您想要添加下拉箭头，您需要添加以下类似的自定义CSS样式。

ul.select2-choices {
    padding-right: 30px !important;
}

ul.select2-choices:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
12
在版本4+中，将select2-choices类替换为select2-selection__rendered。 - Ross
@Ross，我将select2-choices类更改为select2-selection__rendered，但仍然无法显示，可能存在什么问题？ - Sagar Gautam
5

$(function () {
  $("#select1").select2();
});
.select2-container--default .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer
}

.select2-container--open .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select multiple id="select1" style="width: 300px">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>

Source: https://github.com/select2/select2/issues/167#issuecomment-322461384 这篇文章讨论了在使用Select2插件时，如何解决搜索框无法输入中文的问题。解决方法是在初始化Select2时添加language选项，并将其设置为'zh-CN'。
2

基于Adam Love的回答，这段代码使用了FontAwesome向下箭头图标（虽然你也可以轻松地将其替换为其他图标）：

.select2-container--default .select2-selection--multiple {
    padding-right: 20px;
}
.select2-container--default .select2-selection--multiple::after {
    position: absolute;
    right: 5px;
    top: 42%;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f078";
    font-size: 0.7rem;
}
1

$("#e1").select2();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">

<select multiple id="e1" style="width:300px">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>

选择 { 背景: url(../img/arrow.png) 不重复 右中; 外观: 无; -moz-外观: 无; -webkit-外观: 无; 宽度: 90像素; 文本缩进: 0.01像素; 文本溢出: ""; } - Elumalai k
0
您可以添加此CSS代码，它将应用于选择的span。
.select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 10px;
  right: 7px;
  width: 20px;
}
.select2-selection__arrow b{
    border-color: #009688 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
  }
0

只需添加 class="form-select" 即可使其正常工作

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接