Question

我要为select2设置黄色背景色。如果我像这样设置输入，那就可以了

$('#dllSelect').select({
  allowClear: true,
  placeholder: ""
})

input:required {
  background-color: yellow;
}

select:required {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="text" name="dllSelect" id="dllSelect" class="form-control" required>
  <option value="">&nbsp;</option>
</select>

但是使用select不能正常工作。如何设置？ 注意： https://select2.org/

Answer 1

这是将背景颜色设置为仅特定选择（在您的情况下为required个选择）的一种方法

选项containerCssClass（docs）的使用

$(".select2").select2({
	containerCssClass: function(e) { 
  	return $(e).attr('required') ? 'required' : '';
	}
});

.select2-selection.required {
    background-color: yellow !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<form>
    required select2 #1: <select class="select2" required  name="test">
    <option>Test</option>
    <option>Test2</option>
</select>
    <br/>
    NOT required select2 #2: <select class="select2"  name="test1">
    <option>Test</option>
    <option>Test2</option>
</select>
<br/>
</form>

相关代码更改：

$(".select2").select2({
   containerCssClass: function(e) { 
     return $(e).attr('required') ? 'required' : '';
   }
});

这样，附加类将应用于select2容器，我们可以在其中应用自定义CSS。

.select2-selection.required {
   background-color: yellow !important;
}

在这种情况下，只有第一个选择将具有黄色背景，因为它具有required属性。

希望这会有所帮助。

Answer 2

在这里您可以执行以下操作：

.select2-results ul li {
    background-color: red !important;
}

在此处查看演示： http://jsfiddle.net/5f0r9vsy/

select2所需的选择器

2 个答案: