1

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

一个 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 的解决方案。）

4

1 回答 1

2

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

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

于 2013-05-05T13:57:30.087 回答