请在Chrome和Firefox中查看http://demo.neeraj.name/admin_data。在Firefox中,选择框的高度很大。在Chrome中,选择框的高度非常小。
如何使Chrome和Safari的选择框看起来像Firefox的下拉选择框?
请在Chrome和Firefox中查看http://demo.neeraj.name/admin_data。在Firefox中,选择框的高度很大。在Chrome中,选择框的高度非常小。
如何使Chrome和Safari的选择框看起来像Firefox的下拉选择框?
我以前遇到过这个问题。
在Windows上,设置
@media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button; } }
- daveaspinall-webkit-appearance: none
可以工作,但在 Chrome 上它不会显示下拉菜单中的文本(无论是选项还是所选选项)。 - marcamillion增加 line-height
。
-webkit-select-appearance: none
然后自己进行样式设计。这种方法的缺点是你必须完全自己设计样式(添加箭头等)。 - Jonathan Dumaineheight属性在Safari中不起作用,除非你还设置了background属性。如果你设置了背景,可能会在Windows版本的Safari中丢失下拉箭头。同样,表单样式似乎存在许多问题。
@Chi的回答是正确的。另一个快速的技巧是添加边框CSS样式:
select { border: 1px solid #CCC }
这会同时触发 -webkit-appearance:menulist-button 属性,并有去除丑陋黑色边框的额外好处 :)
-webkit-appearance: menulist-button;
具有相同的效果。 - Charles使用CSS的border属性。将select的边框设置为无或0。border:none;在Mac OS系统的Chrome和Safari中显示完美。
border:none;
或 border:1px solid #ccc;
似乎会启用在 Mac Chrome/Safari 中修改输入字体属性的能力。奇怪。 - Justin您可以增加字体大小来帮助高度问题。我认为Safari Mac最多显示16像素的字体大小。至少可以获得更大的点击区域。
示例页面适用于Google Chrome 4和Safari 4
select
标签的类设置为 btn
,然后使用 css
更改其高度,这就是我解决它的方法(在 Mac 上)。 - Emma只需设置高度属性。在 Windows 上,line-height 在 Safari 中有效,但在 Mac 上无效。height 在两者上都有效。