更改Select2的默认字体

Question

我正在使用Select2插件将搜索功能添加到我的下拉列表中.但是,我希望将这些下拉列表的字体样式设置为与其他字段相同的字体:font-family: Arial, Helvetica, sans-serif;

我的'选择'HTML:

<label>Department</label>
<select class='js-example-basic-single' name="department" id="department" required>
  <option value="Dep 1">Dep 1 </option>
  <option value="Dep 2">Dep 2 </option> etc.....
</select>

我的JavaScript:

$(document).ready(function() {
  $(".js-example-basic-single").select2({
    placeholder: "Please Select an option",
    allowClear: true
  });
});

我确信有一个简单的答案,但似乎找不到一个.

Answer 1

我需要更改的唯一 css 类（对于单选）是：

.select2-selection__rendered {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

Answer 2

select2js为Select HTML标记的不同部分提供不同的类和id选择器.

对于特定更改Select OPTION 字体大小,我们可以使用以下类选择器来更改我们的要求.

.select2-results__options{
        font-size:14px !important;
 }