Google Chrome中<option>的边框属性</option>

Question

当我将此样式应用于选项元素时：

border-color: #8A8A8A #E5E5E5 #E5E5E5 #8A8A8A;
border-style: solid;
border-width: 1px;

所有浏览器都正确显示，但谷歌浏览器会忽略此样式并呈现双边框。我该如何解决？

Answer 1

将outline: none添加到您的CSS规则中。这将删除Google Chrome在关注时围绕元素放置的橙色边框。

outline:none;
border-color: #8A8A8A #E5E5E5 #E5E5E5 #8A8A8A;
border-style: solid;
border-width: 1px;

http://jsfiddle.net/Curt/rLVhp/1/

Answer 2

您可能应该先禁用任何预样式应用于您的选项元素。

默认情况下，Chrome会将某些元素的某些样式设置为“选项”，而将许多其他样式设置为“文本字段”等等。

我已经遇到了同样的问题，通过重置整个元素的默认样式来解决。