动画边框的颜色：边框先变黑

Question

当我尝试使边框的边框颜色变为黑色时变为蓝色（蓝色是我希望的颜色）。黑色的intermezzo看起来真的很丑，所以我来这里问这是否是一个已知的问题，以及是否有解决方法。动画边框的颜色<input>：边框先变黑

一个的jsfiddle：http://jsfiddle.net/ZBWQx/

涉及的CSS：

input:not([type="submit"]) { 
    border-radius: 5px; 
    height: 25px; 
    padding: 3px; 
} 
input:not([type="submit"]):focus { 
    border-color: #6d9eeb; 
    transition-property: border-color; 
    transition-duration: 0.5s; 
    -webkit-transition-property: border-color; 
    -webkit-transition-duration: 0.5s; 
    -o-transition-property: border-color; 
    -o-transition-duration: 0.5s; 
    -moz-transition-property: border-color; 
    -moz-transition-duration: 0.5s; 
} 
input { 
    outline: 0; 
} 

虽然我没有使用上述的其他供应商的前缀，便携性并不重要。它只需要在Chrome中工作。 （但这对于未来的读者来说可能很方便，因为这里也可以找到在Firefox中工作的解决方案。）

Answer 1

在我看来，如果您没有设置初始边框颜色，则默认为黑色。

将border-color: #eeeeee;添加到输入选择器似乎解决了这个问题，至少对我来说OSX Safari。