Css 如何更改选择选项的字体大小？

我正在尝试设置选择选项下拉列表的样式。是否可以使选项的字体大小不同于默认值？ 例如，默认设置为：

-- Select Country --  

尺寸为7磅；还有一个选择

Georgia

尺寸为13磅

这是我的下拉列表：

.选择加入{ 宽度：170px； 高度：28px； 溢出：隐藏； 背景：url'http://s24.postimg.org/lyhytocf5/dropdown.png"不重复,对,对,； 边框：FEFEFE 1px实心； -webkit边界半径：3px； 边界半径：3px； -webkit盒阴影：插入0px 0px 10px 1px fefe； 盒影：插入0px 0px 10px 1px fefe； } .选择\加入选择{ 背景：透明； 宽度：170px； 字号：7pt； 颜色：灰色； 边界：0； 边界半径：0； 高度：28px； -webkit外观：无； } .选择\加入选择：焦点{ 大纲：无； } -选择国家- 佐治亚州 阿富汗 将CSS类添加到标记以设置其样式：

目前WebKit浏览器不支持此行为，因为规范未定义此行为。请查看此项：

尝试此项

添加你的代码

.select_join option{
    font-size:13px;
}

---

告诉选项元素为13磅

select option{
    font-size: 13pt;
}

然后第一个选项元素是7pt

select option:first-child {
    font-size: 7pt;
}

正在运行演示：

检查此小提琴

我刚刚编辑了上面的小提琴，它很管用

我们需要一个技巧。。。 普通选择下拉列表内容不接受样式。但是如果标签中有一个size参数，那么几乎所有CSS都将应用。考虑到这一点，我创建了一个实际上相当于普通select标记的fiddle，并且可以像可视化语言中的组合框一样手动编辑该值，除非在输入标记中添加readonly

一个简化的例子： 一个活生生的例子： 注1：很抱歉梯度和所有花哨的东西，不，他们不是必要的，是的，我在炫耀，我知道，标签只有人类，标签不骄傲

---

注2：这些标签没有像通常那样封装属于它们的选项；这是故意的。这对样式设计来说是更好的，礼貌的方式会减少很多样式，是的，这是无痛的，适用于所有浏览器。

哦，它不适用于chrome，对吗？你是对的，google chrome在这方面有一个奇怪的行为。检查我的更新答案。它可能不支持字体大小：是的，但你的解决方案是在firefox上工作：谢谢，它在Google Chrome上不工作。你不能在Google Chrome上工作AFAIK@Atropo我认为这可能不是一个错误，而是一个被通缉的决定，可能是为了防止用户写难看的东西：让我们想想，选择一个不同高度/字体的元素，这将是一场噩梦……请解释一下这个答案。你的小提琴表明这不起作用……谢谢，它起作用了：太神奇了！你知道为什么需要size=15吗？它不必是15，重要的是它有一个大小-这就是为什么它呈现为一个列表框，而不是一个带按钮的单行字段。是的，对不起，应该更清楚。使其呈现为列表框的大小属性是什么？这有文件记录吗？这是一个CSS错误吗？这意味着未来它可能会被修复，依赖它的东西会崩溃。它只是大小属性，还是其他属性宽度或高度等也起作用？我自己也可以很容易地找到最后一个问题的答案。这是SELECT的一个很好的特性，它肯定不会消失。我不知道为什么伙计们会这样实现它——大小意味着列表在显示时应该有多高，但仅仅是大小的存在使它默认显示。请看这里：请在您的答案中添加一些说明，说明OP为什么应该使用此选项，以及OP代码中的问题是什么

.selectDefault, .selectDiv option
{
    font-family:arial;
    font-size:12px;
}

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
    <!--

        For the sake of simplicity, I used jQuery here.
        Today it's easy to do the same without it, now
        that we have querySelector(), closest(), etc.

    -->
</div>

select[value="value"]{
   background-color: red;
   padding: 3px;
   font-weight:bold;
}