如何使用 css 更改一个选择框选项文本（select2）的字体大小？

Question

我想更改我的一个选择框的字体大小。但它不起作用：

http://jsfiddle.net/jEADR/3717/

 <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

解决办法：

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 2

我发现这个问题的最佳答案是将选择包装在 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 3

My change on here

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

关于js文件

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

关于 Css 文件

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

Answer 4

通过尝试你的小提琴，我也在 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 5

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

Answer 6

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

建议将其更改为：

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

Answer 7

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

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

Answer 8

使用下面的 CSS 选择器。但是我改变了这个例子的 font-size 值，因为有些浏览器不会显示 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 9

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