CSS 下拉菜单/输入选择的文本大小在 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/503101/
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
Text size for drop down menu/input select not working in Safari
提问by Jerry
First question...
第一个问题...
I'm having trouble getting ANY of the Drop down menu/Input Select's to appear with size 18 font in Safari.
我无法让任何下拉菜单/输入选择在 Safari 中以 18 号字体显示。
Works fine in FF.
在 FF 中工作正常。
Code:
代码：
<form class="form">
<select name="make">
<option value="0"> All</option>
</select>
</form>
Css:
css：
.form input{
font-size:18px;
margin-bottom:0px;
}
Any ideas? Can view live at [http://www.motolistr.com][1]
有任何想法吗？可以在 [ http://www.motolistr.com][1]现场观看
Best, Nick
最好的，尼克
EDIT 1: Thanks for the quick reply. I added a style to the select itself to avoid confusion. I tried;
编辑 1：感谢您的快速回复。我为选择本身添加了一个样式以避免混淆。我试过;
<select name='make' style='font-size: 18pt;'>
</select>
And
和
<select name='make' style='font-size: 18px;'>
</select>
And
和
<select name='make' style='font-size: 1.3em;'>
</select>
Still not working in SAFARI...Again FF works fine with all 3.
仍然不能在 SAFARI 中工作......再次 FF 与所有 3 一起工作正常。
Best, Nick
最好的，尼克
回答by Jerry
To style a select in Safari you first have to turn off the os styling:
要在 Safari 中设置选择样式，您首先必须关闭 os 样式：
select {
-webkit-appearance: none;
}
回答by Florian
Funny thing though: If you change the background- or border-properties on your selectSafari will all of a sudden also apply your font-size.
有趣的是：如果您更改Safari上的background- 或border- 属性，您select的font-size.
回答by Arian Faurtosh
I figured out a way that safari will pick up on font-size ... all you need to do is set a border color, like the following.
我想出了一种让 safari 接受字体大小的方法……您需要做的就是设置边框颜色，如下所示。
-webkit-appearance: none;will make you lose all of safari's attributes, like the arrows... below you can increase the size without losing that.
-webkit 外观：无；会让你失去 safari 的所有属性，比如箭头......下面你可以增加大小而不会失去它。
Will Work in Safari
将在 Safari 中工作
<select style=" font-size: 3em; border: black;">
<option>TEXT</option>
</select>
Won't Work in Safari
无法在 Safari 中工作
<select style=" font-size: 3em;">
<option>TEXT</option>
</select>
回答by bobince
It appers select controls are non-stylable in Safari; it always uses its own OS X-style widget drawing routines to display them. Until recently, this was the norm: browsers would typically use plain OS-provided widgets for form fields. CSS2 doesn't really say how styles should apply to form fields (if at all).
它使选择控件在 Safari 中无法设置样式；它总是使用自己的 OS X 风格的小部件绘制例程来显示它们。直到最近，这还是常态：浏览器通常会使用操作系统提供的普通小部件作为表单字段。CSS2 并没有真正说明样式应该如何应用于表单字段（如果有的话）。
Some browsers today apply the select's font style to the options (IE7, Opera); some allow the on-page select and the pop-up options to be styled differently (Mozilla, Chrome), so the best you can do for consistency is:
今天的一些浏览器将选择的字体样式应用于选项（IE7、Opera）；有些允许页面选择和弹出选项的样式不同（Mozilla，Chrome），因此为了保持一致性，您可以做的最好的事情是：
.form select, .form option {
font: Whatever 18px;
}
But if you absolutely need a stylable drop-down in Safari you will need to write your own clunky ersatz-select in JavaScript. (Or see one of the many existing scripts and framework plugins that do this.)
但是，如果您绝对需要 Safari 中的样式下拉菜单，您将需要在 JavaScript 中编写自己笨拙的 ersatz-select。（或查看执行此操作的众多现有脚本和框架插件之一。）
回答by Braeden
First off this
首先这个
.form input{
font-size:18px;
margin-bottom:0px;
}
will not work because you are not styling the select element you are styling input elements. Try this and it will most likely work.
将不起作用，因为您没有为您正在为输入元素设置样式的 select 元素设置样式。试试这个，它很可能会奏效。
.form select {
font-size:18px;
margin-bottom:0px;
}
回答by ian
At least in Safari 5.1 (I don't have 3 running anymore) you can turn off the default styling with:
至少在 Safari 5.1（我不再运行 3 个）中，您可以关闭默认样式：
select{-webkit-appearance: none}
Then it will conform to your font sizing.
然后它将符合您的字体大小。
回答by Theron
Setting line-height:100% will constrain the height of the select box for a more consistent look, but it still doesn't affect the actual font size.
设置 line-height:100% 将限制选择框的高度以获得更一致的外观，但它仍然不会影响实际的字体大小。
回答by tvanfosson
The selecttechnically isn't an inputtag. Try assigning a class to your select and set the style for the class.
从select技术上讲，这不是input标签。尝试为您的选择分配一个班级并设置该班级的样式。
EDIT: Turns out that Aqua style selects only have three different font sizes available. If you need to set an exact font size, you can turn off Aqua by giving the item a background color, then set the size. FYI, it appears that 20px works without setting the background so it must size up to the next supported Aqua size.
编辑：原来 Aqua 样式选择只有三种不同的字体大小可用。如果您需要设置精确的字体大小，您可以通过为项目提供背景颜色来关闭 Aqua，然后设置大小。仅供参考，似乎 20px 可以在不设置背景的情况下工作，因此它的大小必须达到下一个支持的 Aqua 大小。
Reference: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/. Test page with various styles at http://particletree.com/examples/safari3/drop.html.
参考：http: //particletree.com/notebook/design-friendly-select-elements-in-safari-3/。在http://particletree.com/examples/safari3/drop.html测试各种样式的页面。
<select name='make' class='big-input'>
</select>
.big-input
{
background: #fff; // turns off Aqua
font-size: 18pt; // assuming you meant 18pt, not 18px
margin-bottom: 0px;
}
回答by p36101
In some cases it can help:
在某些情况下，它可以帮助：
select {
-webkit-appearance: menulist-button;
font-size: 30px;
}
回答by hey
try this
尝试这个
<style>
select { border:0; color:#000000; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#FFFFFF; -webkit-appearance: none; }
#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("img/arrow.gif") no-repeat scroll 319px 5px #FFFFFF;
}
</style>
