el-select去掉边框轮廓

### 移除 Element UI 中 `el-select` 组件的边框和焦点轮廓样式

为了有效移除 `el-select` 的边框以及选中时出现的蓝色边框，可以采用深度选择器的方式。具体实现方式如下：

#### 使用 `::v-deep`

通过使用 Vue 提供的 `::v-deep` 深度选择器能够覆盖子组件中的 CSS 类定义。对于希望自定义样式的场景非常有用。

/* 去除输入框内部元素的边框 */
::v-deep .el-input__inner {
    border: none;
    box-shadow: none;
}

此段代码将应用于所有由 `.el-input__inner` 定义的内容，并将其边框属性设为无[^1]。

另外，在处理更复杂的样式需求时，比如当 `el-select` 处于聚焦状态下隐藏其周围的蓝线，则需进一步调整关联的选择器：

/* 当 el-select 获取焦点时不展示外部包裹层的阴影效果 */
::v-deep .el-select .el-input.is-focus .el-input__wrapper {
    outline: none !important;
    box-shadow: none !important;
}

上述配置不仅去除了默认情况下围绕着被激活控件周围产生的高亮线条，同时也确保即使是在获取键盘或鼠标的交互事件之后也不会再次显现出来[^2]。

需要注意的是，如果项目升级到了较新的版本（例如 Vue 3），则应考虑替换旧版的 `::v-deep` 语法至最新的推荐形式 `/deep/` 或者直接利用 `<style scoped>` 结合 `:global()` 来达到相同的效果。

最后提醒一点关于浏览器兼容性的注意事项：尽管现代主流浏览器都支持这些特性，但在某些特定环境下可能仍存在差异；因此建议开发者们务必测试目标环境下的表现情况以确认预期行为一致。