element-ui 删除input框尾部默认图标和获取焦点边框高亮问题

本文链接：https://blog.youkuaiyun.com/weixin_45842954/article/details/124886045

本文主要介绍了如何解决在使用Element-UI时，input框尾部默认图标以及获取焦点和验证失败时边框高亮的问题。通过设置CSS，可以删除尾部的图标，禁用获取焦点时的蓝色边框，以及消除验证错误时的红色高亮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们引用element-ui的input框时，尾部默认会携带图标
在这里插入图片描述

我们可以把它去除，利用f12审查元素发该图标为一个标签类名为 .el-input__validateIcon，把它设置为display:none 就可以去除了，直接给该标签设置发现不起效果，那么找到它的父级标签，增加权重的，这是设置在公共样式里面

.el-form-item--feedback {
  .el-input__validateIcon {
    display: none;
  }
}

获取焦点时边框默认蓝色高亮

输入框获取焦点是会出现蓝色高亮边框，给 input 设置 outline: none ,发现没有效果，通过f12发现，input默认设置了获取焦点和鼠标移入是都会切换高亮，以为是一种解决方案
把三种情况都设置一样的边框颜色，那么就相当于没有切换高亮了

.el-input__inner:focus {
  border-color: #dcdfe6 !important;
}
//边框本身的颜色
.el-input__inner {
  border: 1px solid #dcdfe6;
}
.el-input__inner:hover {
  border-color: #dcdfe6;
}

验证失败时默认会出现红色高亮边框

取消验证失败是红色高亮，可以找到error是的类名，设置与原来的边框一样的颜色

.el-form-item.is-error {
  .el-input__inner {
    border-color: #dcdfe6 !important;
  }
}