[英]Change default font of Select2
I am using the Select2 plugin to add the search feature to my dropdowns. 我正在使用Select2插件将搜索功能添加到我的下拉列表中。 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;
但是,我希望将这些下拉列表的字体样式设置为与其他字段相同的字体: 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. 我确信有一个简单的答案,但似乎找不到一个。
select2js provide different classes and id selectors 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 字体大小 ,我们可以使用以下类选择器来更改我们的要求。
.select2-results__options{
font-size:14px !important;
}
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;
}
In my case, I wanted to change the background color of the Select2. 就我而言,我想改变Select2的背景颜色。 So what I did is found the select2 class name that controls that feature. 所以我所做的是找到控制该功能的select2类名。 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. 我将所需的颜色添加到影响该功能的同一类名的css中,并确保在select2样式表之后加载更新的css。 I did some minor tweeks the same way to the jquery themes. 我以与jquery主题相同的方式做了一些小的tweek。
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选项。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.