时间戳

首页 > 解决方案 > select2 所需的选择器

html - select2 所需的选择器

问题描述

我想为 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/

标签： htmlcsstwitter-bootstrapjquery-select2

解决方案

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

选项的使用containerCssClass（文档）

$(".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属性。

希望这可以帮助。

推荐阅读