Safari 更改选择框高度

Question

我无法更改select的height，所有浏览器都正常工作，但Safari不行，可能出了什么问题？我还尝试创建类.style select，但没有起作用。

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

- Wizard

---

我认为Safari中选择框的高度与文本大小相关联，无法单独设置。 - boz

你可以尝试使用 line-height 来改变它吗？ - PRNDL Development Studios

Answer 1

试试添加这个：

-webkit-appearance: menulist-button;

- Labokas

---

无法在 Windows 机器上使用 Safari，但是 Line-Height 属性足以为 Select 标签设置高度样式。 - Deepak Yadav

这是自Safari 10.1.2版本以来唯一有效的方法。行高不再起作用。 - Ahmad Alfy

这对我不起作用，2020年1月1日。我必须设置-webkit-appearance: none;并使用CSS hack来添加自己的下拉箭头图标。 - turkinator

Answer 2

要在Safari中样式化标签，首先必须关闭操作系统的样式：-webkit-appearance: none;

- Marjan Stanojevic

---

没问题，但这样会隐藏下拉箭头。因此，最好的选择是使用行高（请参见上面的回答）。 - Gilad Barner

这确实隐藏了下拉箭头，但也成功地去除了冒犯性的样式 - 干净的调色板。+1 - David H.

这对于那些通过隐藏原始选择器并使用覆盖层来模拟样式化下拉菜单的人非常有用。 - Jeremy Trpka

Answer 3

您还可以使用

line-height: 25px

这不会影响其他浏览器，但可以修复Safari中的此错误

- hobailey

---

“line-height” 在9.1.3版本中似乎被忽略了，但是“height: 25px”可以正常工作。不幸的是，“min-height”也无法正常工作。 - David H.

在10.1.2版本中，height或line-height不起作用。 - Ralph David Abernathy

Answer 4

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {
        -webkit-appearance: menulist-button !important;
        line-height:24px !important;
    }
}

这段代码可以确保在各种浏览器中元素的高度相同。

- DziNeR dAsS

Answer 5

最佳方式使用 Modernizer 检测器，并为 Safari 添加类选择菜单。

line-height: 20px;

您可以使用jQuery UI选择菜单来解决这个问题，这是另一种跨浏览器的方法。

- Sanjib Debnath

Answer 6

至少在iPad上，选择框不会根据padding或line-height进行渲染，而是会根据给定的高度居中垂直地呈现该值。

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

现在唯一未解决的问题是背景，它是预定义和不可变的。

- bortunac

Answer 7

这是我在2022年解决这个问题的方式：

select, input {
    font-size: 14px; //or whatever
    height: 3em;
    line-height: 3em;
    padding: 0; //top and bottom must be 0
    -webkit-appearance: none;
}

- Mladen Janjetovic

---

这对于高度有效，但在Safari 15.6.1，macOS 12.5.1上删除了上/下箭头。 - RC Whim

@RCWhim - 是的，如果你想自己设计样式，那么你也需要自己制作箭头。因此需要使用 appearance:none。 - Mladen Janjetovic

Answer 8

@media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button !important; line-height:24px !important; } }

根据您的要求设置line-height。

- user3815518

Answer 9

直到我使用内联样式时，一切才开始起作用：

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

一些 Safari（最新的 Windows 版本，5.1.7）无法从 CSS 文件中读取此样式属性。

- Sergey Lost

Answer 10

这是我在2022年解决这个问题的方法：

    select {
      background-color: inherit;
    }

- Daniel Devine