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

Posted 2023-05-07

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

【英文标题】：How can I change the font-size of one select box option text (select2) with css?

【发布时间】：2017-08-04 22:31:25

【问题描述】：

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

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>

【问题讨论】：

试试#e2.select2 -- 去掉空格

@ovokuro 不工作：jsfiddle.net/jEADR/3719

如何在这里使用完整的 select2 脚本https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js

我不确定你是否真的期待这个。试试看jsfiddle.net/jEADR/3727

@Venky 不，我希望两个选择框都是 select2 格式

【参考方案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;

【讨论】：

有趣。我在select2.org/configuration/options-api 看到了这个选项，但我得到了Uncaught Error: No select2/compat/dropdownCss。也许这就是问题所在：github.com/select2/select2/issues/2879#issuecomment-293422517

【参考方案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>

【参考方案3】：

My change on here

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

关于js文件

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

关于 Css 文件

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

【参考方案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>

【参考方案5】：

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

【参考方案6】：

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

建议将其更改为：

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

【讨论】：

当我删除它时，不是用 select2 格式化

【参考方案7】：

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

.select2-dropdown 
   font-size: 12px;

【讨论】：

您好 Dhano 请更新您的问题以具体说明您要归档的内容、已搜索的内容以及您所拥有的最小可执行示例。如果您不说明您的问题，那么 SO 无能为力。此外，请先尝试 google 并搜索 SO 以查找您的问题。欢迎来到 SO Cheers

【参考方案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>

【讨论】：

我猜它不能使用select2 script and css。

@Johannes 但我明确要求有一个 SELECT2 格式的选择框！为什么要删除格式？？

不是格式，是 jQuery——你在你的问题中根本没有提到 jQuery，你只是在提琴

@Johannes，select2 是 html 选择框的 jquery 替代品。那里的脚本对于运行自定义选择框很重要。

所以实际上这是一个 javascript 问题。您应该在问题中列出该 Jacascript。我通过您发布的内容回答了您的问题...

【参考方案9】：

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

【讨论】：

同时删除 javascript