element ui 校验红色高亮失去效果

先看代码

// vue2 

.xxxstylename ::v-deep .el-input-number.is-error .el-input__inner {

border-color: #f56c6c;}
// vue3

.xxxstylename :deep(.el-input-number.is-error .el-input__wrapper) {

box-shadow: 0 0 0 1px #f56c6c inset;

}

第一行 ::v-deep 是 Vue 2 中的写法，而第二行 :deep() 是 Vue 3 中推荐的写法

核心对比：

特性	::v-deep (第一行)	:deep() (第二行)
语法形式	伪元素选择器 (Pseudo-element)	伪类函数 (Pseudo-class function)
主要适用	Vue 2 (配合 SCSS/Less 等预处理器)	Vue 3 (官方推荐)
兼容性	Vue 3 中仍可用，但已不推荐	Vue 2 中不可用
代码风格	写法相对自由	语法更严谨，将穿透的选择器包裹在函数内

🔍 核心原因分析

Element UI (Vue 2) 的结构逻辑

在 Vue 2 的 Element UI 中，.el-input__inner 就是那个真正的 <input> 标签。

• DOM 结构：.el-input > .el-input__inner (<input>)
• 样式逻辑：边框 (border) 是直接画在 .el-input__inner 这个 input 元素上的。
• 你的代码：.el-input__inner { border-color: #f56c6c; } —— 有效，因为直接修改了 input 的边框属性。

Element Plus (Vue 3) 的结构逻辑

在 Vue 3 的 Element Plus 中，引入了一个新的概念 .el-input__wrapper 作为视觉容器，而 .el-input__inner 变成了一个透明的“内容层”。

• DOM 结构：.el-input > .el-input__wrapper > .el-input__inner (<input>)

• 样式逻辑：

  • .el-input__inner：默认是透明的（无背景、无边框）。它的作用仅仅是承载文字内容。
  • .el-input__wrapper：负责所有的视觉样式。边框是通过给这个容器添加 box-shadow: inset (内阴影) 来模拟的。

• 你的代码：

  • .el-input__inner { border-color: ... } —— 无效。因为这个 input 元素本身已经没有边框了，它是透明的，你给它加边框在视觉上根本看不到。
  • .el-input__wrapper { box-shadow: ... } —— 有效。因为这才是真正绘制边框的地方。

这并非是 Vue 2 和 Vue 3 的区别，而是 Element UI (Vue 2)  和 Element Plus (Vue 3)  这两个组件库在底层 DOM 结构上的重大变化导致的。

简单来说：Element Plus 废弃了 .el-input__inner 直接控制边框的方式，改用 .el-input__wrapper 阴影来绘制边框。

📌 总结

你遇到的现象完全正常，这是因为 Element Plus 改变了实现方式。

• Vue 2 (Element UI) ：边框属于  .el-input__inner (直接改 border)。
• Vue 3 (Element Plus) ：边框属于  .el-input__wrapper (通过改 box-shadow 模拟)。

所以，在 Vue 3 项目中，如果你想修改输入框的边框颜色（例如错误状态），必须针对 .el-input__wrapper 的 box-shadow 属性进行操作，直接修改 .el-input__inner 的 border 是不起作用的。