Question

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

我的选择＆＃39; 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

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

如需更改选择选项字体大小，我们可以使用以下类选择器根据我们的要求更改相同的选项。

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

Answer 2

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

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

Answer 3

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

Answer 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选项。

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

更改Select2的默认字体

5 个答案: