如何在Chrome和Firefox之间标准化选择框的高度？

Question

请在Chrome和Firefox中查看http://demo.neeraj.name/admin_data。在Firefox中，选择框的高度很大。在Chrome中，选择框的高度非常小。

如何使Chrome和Safari的选择框看起来像Firefox的下拉选择框？

- Neeraj Singh

---

尝试使用jqTranform，您将对表单元素拥有更多的控制。 - pixeltocode

请考虑将正确答案更改为得票最高的那个，因为它更加实用。 - willdanceforfun

这个问题已经不再真实存在了。因为你所提到的事物已经不存在了。如果你将HTML、CSS和其他相关内容复制到问题文本中会更好... - Lzh

请务必向下滚动到最底部。不幸的是，最佳答案是倒数第二个。 - Gavin

Answer 1

我以前遇到过这个问题。

在Windows上，设置元素的高度可以正常工作，但在Mac上的Webkit上失败了。 如果您设置CSS属性-webkit-appearance: menulist-button; 这将允许在Mac上正确工作，但在Windows上会创建奇怪的黑边框。您可以通过设置CSS border属性来调整边框，但这会更改所有允许您样式化选择框的浏览器的外观，而不仅仅是Webkit。 目前我放弃了，但希望这是一个好的起点，如果您想进一步调查。

- Chi

---

这应该是正确的答案。 - pixelfreak

非常好用，谢谢！哦，如果要将其仅设置为Chrome浏览器，请使用以下媒体查询来包装语句：@media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button; } } - daveaspinall

这对我不起作用。-webkit-appearance: none 可以工作，但在 Chrome 上它不会显示下拉菜单中的文本（无论是选项还是所选选项）。 - marcamillion

我正在使用opacity: 0和自己的图形叠加，所以这非常完美+1。 - Neil

如何设置 CSS 属性？ - Robbo_UK

感谢 @marcamillion .. 你的评论帮了我很多。 - Joe

Answer 2

增加 line-height。

- Praveen Vijayan

---

这在 Mac Chrome 30.0.1599.69 上已经无法正常工作。 - travis-146

你是我的英雄！！！为了这个烂东西苦苦挣扎了几个小时...现在我只需要设置所选项目的字体即可。 - KapteinMarshall

@travis-146 的一个解决方法是添加 -webkit-select-appearance: none 然后自己进行样式设计。这种方法的缺点是你必须完全自己设计样式（添加箭头等）。 - Jonathan Dumaine

-1 行高在 FF Ubuntu 12 上没有效果。增加字体大小可以解决。 - jenson-button-event

Answer 3

height属性在Safari中不起作用，除非你还设置了background属性。如果你设置了背景，可能会在Windows版本的Safari中丢失下拉箭头。同样，表单样式似乎存在许多问题。

- eggs

---

将“background: none”设为选项框的样式似乎足以让Chrome和Safari在OSX上尊重其高度属性。不过，这仍然像是一种hack方法。长期来看，使用jQuery组合框方案可能更好。 - Anton

@antonm：我不确定 jQuery 下拉框在移动设备上运行效果如何。 - cdmckay

@antonm，大部分CSS不是都像是hack一样吗？ :) 当我写CSS时，我已经接受了这种感觉，即我正在以错误的方式做某些事情。 - corbin

Answer 4

@Chi的回答是正确的。另一个快速的技巧是添加边框CSS样式：

select { border: 1px solid #CCC }

这会同时触发 -webkit-appearance：menulist-button 属性，并有去除丑陋黑色边框的额外好处 :)

- Chris J

---

与-webkit-appearance: menulist-button;具有相同的效果。 - Charles

完全可行。Chrome，Safari，Firefox。胜利！ - mpemburn

Answer 5

使用CSS的border属性。将select的边框设置为无或0。border:none；在Mac OS系统的Chrome和Safari中显示完美。

- Praveen

---

设置 border:none; 或 border:1px solid #ccc; 似乎会启用在 Mac Chrome/Safari 中修改输入字体属性的能力。奇怪。 - Justin

是的，我写了一篇关于它的博客文章，只需添加边框，您就可以更改高度、字体等。http://webstori.es/normalise-select-html-tags-in-windows-and-mac/ - hcharge

这也适用于Chrome版本32.0.1700.102在MacOS上，类似于Chi的答案，使用webkit菜单列表选项。 - Joseph Coco

Answer 6

我使用了jQuery combobox。

通过这个，你可以将必要的CSS类的高度设置为你需要选择框的高度。

- markashworth

---

谢谢。我已经将它更改为类似的链接。 - markashworth

Answer 7

使用line-height在Safari中有效。

- user2381689

Answer 8

您可以增加字体大小来帮助高度问题。我认为Safari Mac最多显示16像素的字体大小。至少可以获得更大的点击区域。

- estern

Answer 9

示例页面适用于Google Chrome 4和Safari 4

- Fatih Hayrioğlu

---

在 Firefox 中看起来和工作一样吗？对我来说不是。 - crimson_penguin

Google Chrome - http://twitpic.com/1cc62p Safari - http://twitpic.com/1cc664 - Fatih Hayrioğlu

你可以将 select 标签的类设置为 btn，然后使用 css 更改其高度，这就是我解决它的方法（在 Mac 上）。 - Emma

Answer 10

只需设置高度属性。在 Windows 上，line-height 在 Safari 中有效，但在 Mac 上无效。height 在两者上都有效。

- Tony Pye

---

我有同样的问题，Mac上的Chrome就是不想改变它。 - Thea