修复 Element Plus (Vue3) 输入框获取焦点时边框消失的问题

....4922026-03-12 14:30

修复 Element Plus (Vue3) 输入框获取焦点时边框消失的问题

在使用 Element Plus （适用于 Vue3）开发项目时，你可能会遇到这样一个问题：

当 <el-input> 组件获得焦点时，默认的聚焦边框样式没有正常显示，导致用户无法直观感知当前输入框处于激活状态。

问题原因

Element Plus 从某个版本开始，默认使用 box-shadow 而非 border 来实现输入框的聚焦高亮效果。但在某些自定义主题、CSS 重置或全局样式干扰下，聚焦时的 box-shadow 可能被覆盖或失效，从而造成"焦点边框消失"的现象。

解决方案

通过覆盖 Element Plus 的 .el-input__wrapper 样式，手动指定聚焦状态下的 box-shadow，即可恢复焦点边框效果。

✅ 修复代码（CSS）

css 复制代码

/* 修复默认边框样式 */
.el-input__wrapper {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  border-radius: 2px !important;
}

/* 修复获取焦点时的边框样式 */
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
}