使用圆角的<select>项目上的额外镀铬边框

Question

我在Chrome中有一个问题,当我在选择的menubox上使用圆角时有"两个"边框(见下文,顶部是输入框,底部是选择框)

input, select { 
    border:2px solid #ced6e9; 
    -moz-border-radius:8px; 
    border-radius: 8px;
}

我尝试了其他两种方法,但它们不起作用:

1. Chrome中的圆角无法正常工作

2. 设置, -webkit-appearance: none;但这将删除指示它是一个选择框的小按钮

编辑 我正在使用Chrome v18的Windows 7(Service Pack 1)

看到这个jsFiddle 示例

Answer 1

之前有这个问题,我所做的只是删除选择的边框并将其包装在具有相同样式(圆形边框)的div中.我确信这是一个更优雅的解决方案,但它比搜索解决方案的时间/天更好.

看看这个小提琴.

Answer 2

您使用的是哪个版本的Windows？有时,操作系统会对某些HTML元素施加额外的图形怪癖.在启用了Aero主题的Windows 7上,Chrome 18中的内容似乎符合要求.我实际上昨天回答了一个类似的问题,其中一个样式select元素的示例用于替换丢失的图形元素-webkit-appearance: none:https://stackoverflow.com/a/10074928/1030243.希望如果找不到其他解决方案,您可以使用一些额外的CSS来实现它.