vue输入框边框颜色

### 修改 Vue 中 `el-input` 组件的边框颜色

为了修改 Element UI 的 `el-input` 组件中的输入框边框颜色，可以利用 CSS 自定义属性来改变默认样式。通过自定义主题变量的方式能够更方便地管理全局样式。

对于特定组件样式的调整，在 `<style>` 标签内使用 `/deep/` 或者 `::v-deep` 来穿透作用域限制是非常常见的做法[^3]：

<style scoped>
/* 使用 ::v-deep 穿透scoped样式 */
::v-deep .el-input {
    /* 定义新的主要颜色作为边框颜色 */
    --el-border-color: #0B848C;
}
</style>

如果希望针对所有状态下的边框都生效，则可以直接指定 `.el-input__inner` 类的选择器，并明确声明边框样式:

<style lang="less" scoped>
/deep/.el-input__inner {
    border-color: #0B848C !important; /* 强制应用此边框颜色 */
}
</style>

当仅需更改聚焦时的边框颜色时，可以通过增加伪类选择器`:focus` 实现特殊状态下不同的视觉反馈效果:

<style lang="less" scoped>
/deep/.el-input__inner:focus {
    border-color: #ff6a00 !important; /* 聚焦时变为橙红色边框 */
}
</style>

上述方法适用于大多数场景下对单个页面内的 `el-input` 进行个性化定制的需求。需要注意的是，不同版本之间可能存在细微差异，因此建议测试确认最终显示效果是否满足预期。