Transition "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;，但还是不行。

我在互联网上似乎找不到任何类似的问题，所以我认为这可能是我浏览器的问题。但是，我在 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">

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

Transition "ease-in-out" not working on text input focus border

html

css

transition

border