如何使用 css 更改一个 select 框选项文本 (select2) 的字体大小？

Question

我想更改我的 select 框之一的字体大小。但它不起作用：

 <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>



<select  id="e1" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

    <select  id="e2" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
<style>
    #e2 .select2-results{
      font-size:4px;
    }
</style>

<script>
$(".select2").select2();
</script>

Answer 1

使用下面的 CSS 选择器。但是我改变了这个例子的字体大小值，因为有些浏览器不会显示 4px 的字体（有最小设置）

#e2.select2, #e2.select2 option {
  font-size:32px;
}

<select  id="e1" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

    <select  id="e2" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

Answer 2

您的原始 pastebin 有一些错误。见下文：

建议将其更改为：

请注意，我更改了以下内容：

Answer 3

 #e2.select2 {
   font-size: 25px;
}

Answer 4

解决方法：

http://jsfiddle.net/jEADR/3730/

<select  id="e1" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

    <select  id="e2" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

<script>
$(".select2").select2();
$("#e2").select2({ dropdownCssClass: "myFont" });
</script>

.myFont{
  font-size:4px;
}

Answer 5

通过尝试您的 fiddle 我在 chrome 开发工具的帮助下得出了这个答案。另外 select2 需要 jQuery 才能运行.

参见下面的示例：

$(".sample").select2({
 width: '200px',
  theme: "classic"
});

/* Select option */
.select2-results__option { 
  font-size: 30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<select class="sample">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

Answer 6

My change on here

只需添加到每个选项 class 并使用它。

在 js 文件上

$("#e1 option,#e2 option").addClass("font-size-4");
$(".select2").select2();

在 Css 个文件上

.font-size-4{
   font-size:4px;
}

Answer 7

对于这个问题，我发现的最佳答案是将 select 包裹在 div 中，然后按如下方式设置 CSS。

CSS:

.fooSelect
{
    display:inline;
}
.fooSelect .select2-selection__rendered
{
    font-size:1.2em;
}

其他代码：

<div class="fooSelect"><select  id="e1" class="select2" style="width:300px">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select></div>


<script>
    $("#e1").select2();
</script>

Answer 8

ul.select2-results__options li{
  font-size:13px;
}

Answer 9

我用这个。也许可以帮助 :

.select2-dropdown {
   font-size: 12px;
}

如何使用 css 更改一个 select 框选项文本 (select2) 的字体大小？

How can I change the font-size of one select box option text (select2) with css?

css

jquery

select2