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">

过渡“渐进渐出”不适用于文本输入焦点边框

1 个答案: