过渡“缓入”不适用于文本输入焦点边框答案

【问题标题】：Transition "ease-in-out" not working on text input focus border过渡“缓入”不适用于文本输入焦点边框
【发布时间】：2019-11-02 06:41:57
【问题描述】：

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 我的边界。

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

【问题讨论】：

标签： html css border transition

【解决方案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;
}

&lt;input placeholder="click here"&gt;

【讨论】：

这太完美了！谢谢！