javascript 更改 Select2 的默认字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34299971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change default font of Select2
提问by Jordan Davis
I am using the Select2 plugin to add the search feature to my dropdowns. However, I want the font style of these drop downs to be set to the same font as my other fields: font-family: Arial, Helvetica, sans-serif;
我正在使用 Select2 插件将搜索功能添加到我的下拉列表中。但是，我希望将这些下拉菜单的字体样式设置为与其他字段相同的字体：font-family: Arial, Helvetica, sans-serif;
My 'Select' HTML:
我的“选择”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>
My JavaScript:
我的 JavaScript：
$(document).ready(function() {
$(".js-example-basic-single").select2({
placeholder: "Please Select an option",
allowClear: true
});
});
I'm sure there is an easy answer to this, but couldn't seem to find one.
我相信对此有一个简单的答案，但似乎找不到。
回答by Mohd Belal
select2jsprovide different classes and idselectors for different sections of the Select HTML tag.
select2js为Select HTML 标签的不同部分提供了不同的类和 id选择器。
For specific changing the Select OPTION font-size, we can use the following class selector to change the same acc to our requirement.
对于特定更改 Select OPTION font-size，我们可以使用以下类选择器更改相同的 acc 以满足我们的要求。
.select2-results__options{
font-size:14px !important;
}
回答by toms
the only css class I needed to change (for single-selects) was:
我需要更改的唯一 css 类（对于单选）是：
.select2-selection__rendered {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
回答by Bindrid
In my case, I wanted to change the background color of the Select2. So what I did is found the select2 class name that controls that feature. I added my desired color to the css of the same class name affecting that feature and made sure that updated css loaded after the select2 stylesheets. I did some minor tweeks the same way to the jquery themes.
就我而言，我想更改 Select2 的背景颜色。所以我所做的是找到了控制该功能的 select2 类名。我将我想要的颜色添加到影响该功能的相同类名的 css 中，并确保在 select2 样式表之后加载更新的 css。我对 jquery 主题以相同的方式做了一些小 tweeks。
回答by Bindrid
I stumbled across this feature this morning and it worked! It uses containerCssClass.
今天早上我偶然发现了这个功能，它奏效了！它使用 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>
The first box had tiny font, and the second one had regular font. He also added the dropdownCssClass option.
第一个框的字体很小，第二个框的字体很普通。他还添加了 dropdownCssClass 选项。
回答by haakon.io
<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>
