更改 Select2 的默认字体答案

【问题标题】：Change default font of Select2更改 Select2 的默认字体
【发布时间】：2015-12-15 21:44:04
【问题描述】：

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

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

【问题讨论】：

你能不能只检查插件使用的html并用你自己的覆盖css样式/类？

标签： javascript css fonts jquery-select2

【解决方案1】：

select2js为Select HTML标签的不同部分提供不同的classes和id选择器。

为了具体改变Select OPTIONfont-size，我们可以使用下面的类选择器来改变我们的要求。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

就我而言，我想更改 Select2 的背景颜色。所以我所做的是找到了控制该功能的 select2 类名。我将我想要的颜色添加到影响该功能的相同类名的 css 中，并确保在 select2 样式表之后加载更新的 css。我以同样的方式对 jquery 主题做了一些小的 tweeks。

【讨论】：

这可能是我必须做的，但我希望我不必大声笑。
您是否尝试过在实际覆盖类之前使用 !important 进行覆盖？我很少这样做，但我确实使用它。

【解决方案4】：

我今天早上偶然发现了这个功能，它确实有效！它使用 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>

第一个盒子有小字体，第二个盒子有常规字体。他还添加了 dropdownCssClass 选项。

【讨论】：

当我尝试这个时，我得到以下错误：未捕获的错误：没有 select2/compat/containerCss
Nvm，我修好了，我只需要完整版就可以了。
我正要粘贴该信息以确保我们在同一页面 :)

【解决方案5】：

<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>

【讨论】：