Html 额外的镀铬边框<；选择>；使用圆角的项目

我在Chrome中遇到一个问题，当我在选择菜单框上使用圆角时，会出现“两个”边框（见下文，顶部是一个输入框，底部是选择框）

我尝试过其他两种方法，但都不起作用：

不起作用，而且

设置

-webkit外观：无但这会删除指示它是选择框的小按钮

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

编辑 我正在使用Windows7（service pack 1）和Chrome v18

---

请参阅此JSFIDLE

将css大纲属性设置为“无”以进行下拉

select:focus  
{  
    outline: none;  
} 

---

您使用的是什么版本的Windows？有时，操作系统会将额外的图形怪癖强加给某些HTML元素。在启用Aero主题的Windows7上，Chrome18的表现似乎与预期相符。事实上，我昨天用一个示例回答了一个类似的问题，该示例用于设置

选择
元素的样式，以替换丢失的图形元素，并使用
-webkit外观：none
：。希望，如果没有找到其他解决方案，您可以使用几行额外的CSS来实现它。
以前有过这个问题，我所做的只是删除select上的边框，并将其包装在具有相同样式（圆角边框）的div中。我相信有一个更优雅的解决方案，但它比花几个小时/天寻找解决方案要好

看看这个。
我建议使用填充而不是边距。。。它看起来会更好

select {        
  -moz-border-radius:8px; 
  border-radius: 8px;
  -webkit-border-radius: 5px; /*this one is more important than the moz one*/
  padding:9px;
}

不起作用；大纲不是问题所在。它周围有一个多余的灰色框，这是不必要的。是的，额外的操作系统的东西肯定是问题所在。奇怪。我使用的是带有service pack 1的Windows 7注意-webkit外观：没有人会删除箭头，还包括safari（ipad/iphone等）。这个问题有助于替换箭头：请不要让用户依赖外部来源获得答案，除非他们要求提供某个链接。JSFiddle以前已经失败过，可能再次发生；请将代码编辑到答案中。：）由于OP在他的问题中使用了jsfiddle，我将假设我可以使用jsfiddle作为答案。除了代码示例之外，OP还使用了fiddle。如果你喜欢，我可以帮你编辑：）你可以编辑任何你喜欢的，但是如果stackoverflow崩溃了怎么办。。。他永远也得不到答案没有代码的反链接不是我的，它是一个。也就是说，您确实包含了一个解释，因此我自然不会犹豫或做任何事情，我的第一个评论有点不恰当，因为您的答案并不完全依赖于链接。：）这确实感觉像一个bug，而且它似乎与select元素的border-width属性以及border-radius相关。去掉宽度，没关系。将四个边中的三个设置为一个宽度，这很好。设置所有四个边界，问题。