html - select2 所需的选择器

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

这是一种将背景颜色设置为仅特定选择的方法(在您的情况下设置为必需的)

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

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

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

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

希望这对您有所帮助。