google-chrome - 动画 <input> : border turns black first 的边框颜色

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 中工作。 (但对于 future 的读者来说，在这里也能找到适用于 Firefox 的解决方案可能会很方便。)

Answer 1

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

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