html - 转换 "ease-in-out"不适用于文本输入焦点边框

Question

transition: all .2s ease-in-out; 没有为我的文本输入字段工作。

我想让它做的是，当您聚焦文本输入字段时，黑色边框会淡入，反之亦然。

这是我的CSS:

#game-pin > input:focus {
  outline: none;
  border: 2px solid black;
  transition: all .2s ease-in-out;
}

我试过将 transition: all .2s ease-in-out; 放入 #game-pin 本身无济于事。我也试过 transition: border .2s ease-in-out; ，但它仍然不起作用。

我似乎无法在 Internet 上找到任何类似的问题，所以我认为这可能是我浏览器的问题。但是，我在 Opera、Google Chrome、Internet Explorer、Firefox、Safari 和 Microsoft Edge 上对此进行了测试，它们都拒绝为我ease-in-out 边框。

任何帮助将不胜感激，谢谢!

Answer 1

定义一个透明色的边框，并改变焦点上的border-color。

注意:如果您希望效果也出现在模糊上，请将过渡移动到 input 的定义。

input {
  transition: all 1s ease-in-out; /* changed the timing to show the effect */
  border: 2px solid transparent;
  background: lightgrey;
}

input:focus {
  outline: none;
  border-color: black;
}

<input placeholder="click here">