更改Select2的默认字体

Change default font of Select2

本文关键字：字体 默认 Select2 更改      更新时间：2023-09-26

我正在使用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
  });
});

我相信有一个简单的答案，但似乎找不到。

select2js为SelectHTML标记的不同部分提供不同的类和id选择器。

对于具体更改Select OPTIONfont-size，我们可以使用以下类选择器根据我们的要求更改相同的acc。

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

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

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

在我的情况下，我想更改Select2的背景色。因此，我所做的是找到了控制该功能的select2类名。我将我想要的颜色添加到影响该功能的相同类名的css中，并确保在select2样式表之后加载更新的css。我用与jquery主题相同的方式做了一些小的tweek。

今天早上我偶然发现了这个功能，它成功了！它使用containerCssClass。

    <style type="text/css">
        .myFont {
            font-size:x-small;
        }
    </style>
    <select id="m"><option>one</option><option>two</option></select>
    <select id="n"><option>three</option><option>four</option></select>
    <script type="text/javascript">
        $("#m").select2({ containerCssClass: "myFont" });
        $("#n").select2();
    </script>

第一个盒子有很小的字体，第二个盒子有普通的字体。他还添加了下拉CssClass选项。

<select class='js-example-basic-single' name="department" id="department" style="font-family: Arial, Helvetica, sans-serif;" required>
    <option value="Dep 1">Dep 1 </option>
    <option value="Dep 2">Dep 2 </option> etc.....
    </select>
相关文章：