動畫邊框的顏色<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。