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

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

有趣的是:如果你改变你的Safari 上的background- 或border- 属性,select突然也会应用你的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

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

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

参考：http://articletree.com/notebook/design-Friendly-select-elements-in-safari-3/。具有各种样式的测试页面位于http://articletree.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;
 }