如何更改下拉选项的字体大小？

Question

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

-- Select Country --  

字号应为7pt；其中一个选项是：

Georgia

字体大小应该是13pt。

这是我的下拉列表：

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}

<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

请参见我的JSFiddle演示。

不幸的是，它只能在Firefox上运行。其他浏览器是否不支持对<option>元素的样式设置？

我测试过的浏览器：

• Chrome：版本27.0.1453.116 m
• IE：10
• Firefox：22.0

- user1128331

Answer 1

我们需要一个小技巧...

通常选择下拉菜单不接受样式。但是，如果标签中有“size”参数，几乎任何CSS都会应用。有了这个想法，我创建了一个与正常选择标记基本相同的演示文稿，此外，该值可以像可视化语言中的ComboBox一样手动编辑（除非在输入标记中放置readonly）。

一个简化的例子：

<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>

一个实时例子:

https://jsfiddle.net/7ac9us70/1052/

注1: 抱歉使用了渐变和一些花哨的东西,它们并不是必需品,我知道我在炫耀,但是这只是人类的本性,我不为此感到自豪。

注2: 这些<optgroup> 标签没有像通常应该那样封装属于它们下面的选项;这是有意为之的。它更适合样式（有礼貌的方式会难以样式化），而且这种方法对每个浏览器都很简单有效。

- dkellner

---

太棒了！你知道为什么需要size=15吗？ - Jay

它不一定要是15，重要的是它有一个大小 - 这就是使它呈现为列表框而不是带有按钮的单行字段的原因。 - dkellner

是的，抱歉，我应该表达得更清楚。是什么使大小属性呈现为列表框？这是否有记录在案？这是CSS的一个错误吗？（这意味着它可能会在未来被修复，依赖它的事物将会中断）。只有大小属性吗，还是其他属性（如宽度或高度等）也可以？（我可以通过玩弄小样例很容易地找到最后一个问题的答案） - Jay

不，这是SELECT的一个经过充分记录的功能，它绝对不会消失。我不知道为什么那些人会这样实现它 - size表示当显示列表时应该有多高，但仅仅存在“size”就会默认显示它。请参见此处：https://developer.mozilla.org/en/docs/Web/HTML/Element/select - dkellner

Answer 2

为 <option> 标签添加 CSS 类以进行样式设置: http://jsfiddle.net/Ahreu/

目前 WebKit 浏览器不支持此行为，因为规范未定义。请参考此内容：如何为 select 标签的 option 元素设置样式？

- Atropo

---

哦，它在Chrome上不起作用？ - user1128331

你是对的，Google Chrome 在这方面表现很奇怪。请查看我的更新答案。 - Atropo

它可能不支持字体大小调整 :( - user1128331

是的，但你的解决方案只在Firefox上有效 :) 谢谢 - user1128331

Answer 3

告诉选项元素字体大小为13pt。

select option{
    font-size: 13pt;
}

然后将第一个选项元素设置为7pt

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

运行演示：http://jsfiddle.net/VggvD/1/

- Andrea Ligios

---

无法在谷歌浏览器上运行。 - Atropo

据我所知，在Google Chrome中你无法这样做。 - Andrea Ligios

@Atropo 我认为这可能不是一个错误，而是一个有意的决定，可能是为了防止用户编写丑陋的东西：让我们考虑一下每个元素高度/字体不同的选择，那将是一场噩梦... - Andrea Ligios

Answer 4

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

- Benito Esteban

---

好的，我会尽力根据您的要求进行翻译。以下是需要翻译的内容：请在您的回答中添加一些说明，说明为什么 OP 应该使用这个解决方案以及 OP 代码中存在什么问题。 - Muhammad Omer Aslam

Answer 5

试一下这个

http://jsfiddle.net/VggvD/2/

在CSS中添加你的代码

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

- Falguni Panchal

---

你的代码示例表明这个方法不起作用... - Ben Racicot

谢谢，它正在工作 :) - user3k

Answer 6

看看这个fiddle（JSFiddle在线代码编辑器），

我刚刚编辑了上面的fiddle，它现在可以工作了。

http://jsfiddle.net/narensrinivasans/FpNxn/1/

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

- Naren Srinivasan S

---

请解释一下这个答案。 - Sergio