更改HTML下拉选项的字体大小

Question

我有一个简单的HTML下拉菜单：

<select>
    <option style="font-size:50px;">Test</option>
</select>

我找不到一种方法来增加选项的字体大小。字体大小属性由于某些原因被忽略了。这是一个bug还是怎么回事？

谢谢

- Michael Samuel

---

关闭默认的操作系统样式...请参见我最后编辑的答案中的详细信息。这肯定会起作用。 - Krupal Shah

在注释中（仅在注释中），您说特定大小大于16px不起作用。您需要指定已测试的浏览器并提供可重现的案例。有些浏览器不允许您为“option”设置样式，只能为“select”设置，但这是一个不同的问题（在旧的SO问题和答案中已经很好地解决了）。 - Jukka K. Korpela

Answer 1

你试过将它放在你的 <select> 元素上吗？

<select style="font-size:50px;">
    <option>Test</option>
</select>

fiddle: http://jsfiddle.net/tCw8M/

或者使用样式表：

select {
   font-size: 50px;
}

fiddle: http://jsfiddle.net/tCw8M/2/

- underbar

---

由于某些原因，这种方式的效果不太好。同样的问题。标签响应最大为 font-size: 16px; 高于该值不会响应。 - Michael Samuel

嗯，这很奇怪，它在某个程度上能够工作。你尝试过两种方式吗？内联样式属性和外部样式表？你是否使用任何第三方库/插件？这些示例代码都可以正常工作，所以问题可能出在你这边。 - underbar

小提琴演示了问题 :) 文本大小似乎比定义的50px要小得多; - Michael Samuel

你是使用一些可衡量的方式来检查，还是只是说它看起来不像50px？因为在我的端上，文本大小看起来很好。另外，你使用的是哪个浏览器/版本？ - underbar

Answer 2

字体大小选项需要在选择标签上而不是选项标签上：

<select style="font-size:50px;">
     <option >Test</option>
</select>

无论是直接在标签中编写还是在CSS文件中选择标签，都由您决定。

- David Morin

---

由于某些原因，这种方式的效果不太好。同样的问题。标签对最大的 font-size: 16px; 做出响应，高于该值则无响应。 - Michael Samuel

你能将任何其他元素设置为大于50px的字体大小吗？ - David Morin

我不一定需要50像素。标签在16像素后也无效 :) - Michael Samuel

Answer 3

您应该使用以下代码关闭默认的操作系统样式：-webkit-appearance: none； 此处有演示。

- Krupal Shah

---

最新版的 Firefox 上无法运行。还有其他想法吗？ - Zakir_SZH

Answer 4

您需要将样式应用于select而不是option，例如：

select{
    font-size:50px;
}

fiddle

- Alex Char

---

由于某些原因，这种方式的效果不太好。同样的问题。标签对最大的 font-size: 16px; 做出响应，高于该值则无响应。 - Michael Samuel

它运行得很完美。可能是其他原因。你能提供一个链接吗？ - Alex Char

你提供的链接本身就解释了问题 :) 在示例 fiddle 中，字体大小无论如何都不能为50px；50px应该比这个要大得多。 - Michael Samuel

请点击此处查看 http://jsfiddle.net/eR4QN/1/，可以看到大小没有任何区别。 - Alex Char

Answer 5

Put it in a stylesheet:

select{
font-size: 150px;

}

请查看示例：http://jsfiddle.net/robcabrera/bx8R4/

- rob