elementui input输入框有个蓝色的边框如何去掉

Element UI是一个基于Vue.js的桌面端组件库，它提供了一系列的UI组件，其中包括Input输入框。在使用Element UI的Input组件时，通常会有一些默认的样式，比如聚焦时的蓝色边框。要去除这个蓝色边框，可以通过覆盖默认的样式来实现。

以下是一些方法可以去除Input输入框聚焦时的蓝色边框：

1. 使用全局样式覆盖。你可以在全局样式文件中定义一个新的CSS规则，这个规则会覆盖掉Element UI中对应Input聚焦样式。例如：

/* 全局样式覆盖 */
input::-webkit-input-placeholder { /* WebKit浏览器的默认样式 */
  color: red;
}
input:-moz-placeholder { /* Firefox 4到18的默认样式 */
  color: red;
}
input::-moz-placeholder { /* Firefox 19及以后的默认样式 */
  color: red;
}
input:-ms-input-placeholder { /* IE的默认样式 */
  color: red;
}
input:focus {
  outline: none; /* 去除聚焦时的轮廓线 */
}

2. 为特定的Input元素添加类名，并定义样式。如果你想要对特定的Input元素去除蓝色边框，可以给该元素添加一个特定的类名，然后在样式表中定义该类名对应的CSS规则：

<el-input class="no-outline"></el-input>

/* 针对特定元素的样式覆盖 */
.no-outline:focus {
  outline: none; /* 去除聚焦时的轮廓线 */
}

3. 使用深度选择器。Element UI提供了一个深度选择器（>>> 或 /deep/），可以用来穿透组件的样式封装。使用这个深度选择器，可以更精确地覆盖内部的样式：

/* 使用深度选择器 */
/deep/ .el-input .el-input__inner:focus {
  outline: none; /* 去除聚焦时的轮廓线 */
}

请注意，对于Vue 3项目，深度选择器的写法可能有所不同，因为Vue 3对样式穿透的支持有所变化。