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

Posted 2023-03-06

【中文标题】<input> 的边框颜色动画：边框先变黑

【英文标题】：Animating the border color of an <input>: border turns black first

【发布时间】：2013-04-29 09:32:13

【问题描述】：

当我尝试为边框的边框颜色设置动画时，边框首先变为黑色，然后变为蓝色（蓝色是我想要的颜色）。黑色的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 的解决方案。）

【参考方案1】：

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

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