Question

第一个问题......

我无法获取任何下拉菜单/输入选择以在Safari中显示大小为18的字体。

在FF中工作正常。

代码：

<form class="form">
<select name="make">
<option value="0"> All</option>
</select>
</form>

的CSS：

.form input{
font-size:18px;
margin-bottom:0px;
}

有什么想法吗？可以[http://www.motolistr.com][1]

直播

最佳，尼克

编辑1：感谢您的快速答复。我为选择本身添加了一种样式以避免混淆。我试过了;

<select name='make' style='font-size: 18pt;'>
 </select>

和

<select name='make' style='font-size: 18px;'>
 </select>

和

<select name='make' style='font-size: 1.3em;'>
 </select>

仍然没有在SAFARI工作......再次，FF适用于所有3。

最佳，尼克

Answer 1

要在Safari中设置选择样式，首先必须关闭os样式：

select {
    -webkit-appearance: none;
}

Answer 2

有趣的是：如果您更改了background - 或border - select上的属性，Safari会突然同时应用您的font-size。

Answer 3

我想出了safari将采用字体大小的方式......您需要做的就是设置边框颜色，如下所示。

-webkit-appearance：none; 会让你失去所有的safari属性，比如箭头......下面你可以增加大小而不会失去它。

可以在Safari中使用

<select style=" font-size: 3em; border: black;">
    <option>TEXT</option>
</select>

无法在Safari中使用

<select style=" font-size: 3em;">
    <option>TEXT</option>
</select>

Answer 4

它选择的控件在Safari中是不可设置的;它总是使用自己的OS X风格的小部件绘图例程来显示它们。直到最近，这是常态：浏览器通常会使用纯OS提供的窗口小部件来表单。 CSS2并没有真正说明样式应该如何应用于表单字段（如果有的话）。

今天有些浏览器将select的字体样式应用于选项（IE7，Opera）;一些允许页面上的选择和弹出选项的样式不同（Mozilla，Chrome），所以你可以做的最好的一致性是：

.form select, .form option {
    font: Whatever 18px;
}

但如果你在Safari中绝对需要一个可设置的下拉菜单，你需要在JavaScript中编写自己的笨重的ersatz-select。（或者参见许多现有的脚本和框架插件之一。）

Answer 5

首先关闭此

.form input{
font-size:18px;
margin-bottom:0px;
}

将无法正常工作，因为您没有为要设置输入元素样式的select元素设置样式。试试这个，它很可能会奏效。

.form select {
font-size:18px;
margin-bottom:0px;
}

Answer 6

至少在Safari 5.1中（我没有3次运行）你可以用以下方式关闭默认样式：

select{-webkit-appearance: none}

然后它将符合您的字体大小。

Answer 7

select技术上不是input标记。尝试为您的选择分配一个类并设置该类的样式。

编辑：原来Aqua样式选择只有三种不同的字体可用。如果您需要设置确切的字体大小，可以通过为项目提供背景颜色来关闭Aqua，然后设置大小。仅供参考，看来20px在没有设置背景的情况下工作，所以它必须调整到下一个支持的Aqua尺寸。

参考：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;
 }

Answer 8

设置行高：100％将限制选择框的高度以获得更一致的外观，但它仍然不会影响实际的字体大小。

Answer 9

在某些情况下，它可以帮助您：

select {
    -webkit-appearance: menulist-button;
    font-size: 30px;
}

Answer 10

我找到了一种通过使用百分比来改变Safari中选择元素字体大小的方法。
然后你的代码变成：

<select name='make' style='font-size: 120%;'></select>

对于13px字体大小（我觉得非常有吸引力）。

这是在Safari 5.1.3中测试的

Answer 11

您可以通过以下方式定位Safari select标记：

select {
    width: 224px;
    line-height: 1.8;  (This can be in px too)
}

Answer 12

试试这个

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

下拉菜单/输入选择的文本大小在Safari中不起作用

12 个答案: