动画<input />的边框颜色：边框首先变黑

Question

当我尝试为边框颜色设置动画时，首先变为黑色，然后变为蓝色（蓝色是我想要的颜色）。黑色的intermezzo看起来真的很难看，所以我来这里询问这是否是一个已知的问题以及是否有解决方法。

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上是这样。