CSS 如何更改选择选项的字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17419957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change the font-size of a select option?
提问by user1128331
I am trying to style a select option dropdown list. Is it possible to make the font-sizes of the options different from the default value? For example, the default:
我正在尝试设置选择选项下拉列表的样式。是否可以使选项的字体大小与默认值不同？例如，默认值：
-- Select Country --
Would be size 7pt; and one of the options,
尺寸为 7pt；和选项之一，
Georgia
Would be size 13pt.
将是大小 13pt。
This is my dropdown list:
这是我的下拉列表：
.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>See also my demo on JSFiddle.
另请参阅我在 JSFiddle 上的演示。
Unfortunately, it works only on Firefox. Could it be that others browser don't support styling of <option>elements?
不幸的是，它仅适用于 Firefox。可能是其他浏览器不支持<option>元素样式吗？
Browsers I tested on:
我测试过的浏览器：
- Chrome: Version 27.0.1453.116 m
- IE: 10
- Firefox: 22.0
- 铬：版本 27.0.1453.116 m
- IE: 10
- 火狐：22.0
采纳答案by Atropo
Add a CSS class to the <option>tag to style it: http://jsfiddle.net/Ahreu/
将 CSS 类添加到<option>标记以对其进行样式设置：http: //jsfiddle.net/Ahreu/
Currently WebKit browsers don't support this behavior, as it's undefined by the spec. Take a look at this: How to style a select tag's option element?
目前 WebKit 浏览器不支持这种行为，因为它没有被规范定义。看看这个：如何设置选择标签的选项元素的样式？
回答by dkellner
It's doable but tricky.
这是可行的，但很棘手。
Normal select-dropdown things won't accept styles. BUT. If there's a "size" parameter in the tag, almost any CSS will apply. Using this trick, I've created a fiddle that's practically equivalent to a normal select tag, plus the value can be edited manually like a ComboBox in visual languages (unless you put readonlyin the input tag).
正常的选择下拉菜单不会接受样式。但。如果标签中有“size”参数，则几乎所有 CSS 都将适用。使用这个技巧，我创建了一个实际上相当于普通选择标签的小提琴，而且可以像视觉语言中的 ComboBox 一样手动编辑该值（除非您将readonly放在输入标签中）。
So here's a minimal example to see the principle behind:
(you'll need jQuery for the clicking mechanism):
所以这里有一个最小的例子来了解背后的原理：（
你需要 jQuery 来实现点击机制）：
<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>
</div>
Here's the fiddle with some more (actually too much) styles:
这是更多（实际上太多）样式的小提琴：
https://jsfiddle.net/7ac9us70/1052/
https://jsfiddle.net/7ac9us70/1052/
(Again, it's stuffed with gradients and effects just to demonstrate the possibilities. I mean, duh, I'm not telling you to use radial gradient for goups plus hover-animated items! I have a heart!)
（同样，它充满了渐变和效果只是为了展示可能性。我的意思是，呃，我不是告诉你对组使用径向渐变加上悬停动画项目！我有一颗心！）
Notice how <optgroup>tags don't encapsulate the options belonging under them as they normally should; yes this is intentional, it's for the styling (The well-mannered way would be a lot less stylable). And yes they do work perfectly well this way.
注意<optgroup>标签如何不像通常那样封装属于它们的选项；是的，这是故意的，它是为了造型（礼貌的方式会少很多风格）。是的，他们确实以这种方式工作得很好。
回答by Andrea Ligios
Tell the option element to be 13pt
告诉选项元素为 13pt
select option{
font-size: 13pt;
}
and then the firstoption element to be 7pt
然后第一个选项元素为 7pt
select option:first-child {
font-size: 7pt;
}
Running demo: http://jsfiddle.net/VggvD/1/
运行演示：http: //jsfiddle.net/VggvD/1/
回答by Naren Srinivasan S
check this fiddle,
检查这个小提琴，
i just edited the above fiddle, its working
我刚刚编辑了上面的小提琴，它的工作原理
http://jsfiddle.net/narensrinivasans/FpNxn/1/
http://jsfiddle.net/narensrinivasans/FpNxn/1/
.selectDefault, .selectDiv option
{
font-family:arial;
font-size:12px;
}
回答by Benito Esteban
select[value="value"]{
background-color: red;
padding: 3px;
font-weight:bold;
}
回答by Falguni Panchal
try this
尝试这个
CSS add your code
CSS 添加您的代码
.select_join option{
font-size:13px;
}
