33

我无法更改select height，所有浏览器都可以正常工作，但 Safari 不行，哪里有问题？我也尝试 make class .style select，但不工作。

select {
width: 170px; 
height: 25px;
}
4

8 回答 8

34

尝试添加这个：

-webkit-appearance: menulist-button;
于 2013-01-24T20:08:36.463 回答
30

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

-webkit-appearance: none;
于 2013-07-04T11:30:03.300 回答
27

你也可以使用

line-height: 25px

这不会影响其他浏览器，但修复了 Safari 中的这个错误

于 2013-07-04T14:43:31.923 回答
3

最好的方法是使用现代化探测器并为 safari 类选择菜单提供一个

line-height: 20px;

或者您可以使用 jquery UI 选择菜单通过另一个跨浏览器 wy 来解决这个问题。

于 2016-08-24T05:31:20.527 回答
2 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {
        -webkit-appearance: menulist-button !important;
        line-height:24px !important;
    }
}

此代码确保跨浏览器的高度相同。

于 2015-04-10T06:53:16.737 回答
2

至少在 iPad 上，选择不会为填充或行高呈现，而是会呈现给定的高度并垂直居中值

select {
   -webkit-appearance:menu-item; // or menulist-button
   -moz-appearance:menu-item;
   height:2.4em;   // this must be calculated to match other input types     
}

input[type="text"], select {
    min-width:12em;  
    border-radius:5px;
}

现在唯一未解决的是预定义且不可变的背景

于 2015-05-26T14:10:43.353 回答
1

在我使用内联样式之前，没有什么对我有用：

<select name="pickupsel" id="pickups" style="line-height:33px">

不知何故，Safari（最新的 Windows 版本，5.1.7）不会从 CSS 文件中读取此样式属性。

于 2014-05-20T01:17:04.913 回答
1 
@media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button !important; line-height:24px !important; } }

line-height根据你的要求给。

于 2014-07-08T08:35:50.050 回答