如何检测输入框失焦？input:not(:focus)选择器动画异常求助

核心问题原因 #

你遇到的问题根源是过渡属性没有全局覆盖输入框的所有状态：

• 仅在:focus状态添加过渡时，失焦后元素丢失过渡属性，会瞬间恢复原状；
• 使用input:not(:focus)但未给基础输入框或该选择器添加过渡时，状态切换没有动画支撑，导致样式瞬间变化。

正确解决方案 #

把transition属性添加到输入框的基础样式中，确保聚焦、失焦状态切换时都能触发过渡动画：

/* 基础样式：全局设置过渡效果 */
input {
  padding: 0.5rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  /* 关键：让所有状态切换都应用过渡 */
  transition: all 0.5s ease;
}

/* 聚焦状态样式 */
input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

此时无需单独写input:not(:focus)选择器，失焦时输入框会自动从:focus状态过渡回基础样式，动画时长保持你设置的0.5秒。

自定义失焦样式的情况 #

如果需要给失焦状态设置特定样式（而非回到基础样式），直接在input:not(:focus)中定义样式即可，过渡会继承基础样式的设置：

input {
  padding: 0.5rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  transition: all 0.5s ease;
}

input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 自定义失焦样式，自动应用过渡 */
input:not(:focus) {
  border-color: #aaa;
}

关键注意点 #

• 过渡属性必须放在输入框的默认选择器中，不能仅在:focus或:not(:focus)中单独设置；
• 若不需要所有属性都过渡，可指定具体属性（比如transition: border-color 0.5s ease, box-shadow 0.5s ease），能提升性能。

内容的提问来源于stack exchange，提问作者BigmancozmoPlayz