element-plus的el-input如何去除聚焦时候的蓝色边框？

Question

element-plus的el-input如何去除聚焦时候的蓝色边框

以下代码无效

<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue'
import { version as epVersion } from 'element-plus'
import { ref, version as vueVersion } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <el-input v-model="msg" class="custom-input" :input-style="{
    outline: 'none',
  }" />

  <p>
    <el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>
    Element Plus {{ epVersion }} + Vue {{ vueVersion }}
  </p>
</template>

<style>
::deep(.el-input__inner):focus {
  outline: none;
}
input:focus { outline: none; }
:deep(.el-input__inner) {
  --el-input-focus-border-color: transparent;
  --el-input-focus-outline: none;
}
:deep(.el-input__inner:focus) {
  border-color: transparent;
  box-shadow: none;
}
:deep(.custom-input .el-input__inner:focus) {
  border-color: transparent;
  box-shadow: none;
}
 :deep(.el-input__wrapper){
    box-shadow: none;
  }
</style>

尝试过多种方式，但是没有效果，请看在线示例

在线示例

@Seven ,没有效果，在线示例

Answer 1

在 Element Plus 中，el-input 的聚焦边框是通过 box-shadow 实现的，而不是传统的 border。需要重写 .el-input__wrapper 的聚焦状态样式。

<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue'
import { version as epVersion } from 'element-plus'
import { ref, version as vueVersion } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  
  <!-- 原始的 input (有蓝色聚焦边框) -->
  <div style="margin: 20px 0;">
    <p>原始的 input:</p>
    <el-input v-model="msg" placeholder="原始样式" />
  </div>
  
  <!-- 去除聚焦边框的 input -->
  <div style="margin: 20px 0;">
    <p>去除聚焦边框的 input:</p>
    <el-input v-model="msg" class="no-focus-input" placeholder="无聚焦边框" />
  </div>

  <p>
    <el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>
    Element Plus {{ epVersion }} + Vue {{ vueVersion }}
  </p>
</template>

<style>
/* 方法1: 直接覆盖所有 el-input 的聚焦效果 */
/*
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
}
*/

/* 方法2: 使用 CSS 变量覆盖 (推荐) */
.no-focus-input {
  --el-input-focus-border-color: var(--el-input-border-color);
}

/* 方法3: 深度选择器覆盖 box-shadow */
.no-focus-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
}

/* 方法4: 完全去除边框和阴影 */
/*
.no-focus-input :deep(.el-input__wrapper) {
  box-shadow: none !important;
}
.no-focus-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: none !important;
}
*/

/* 方法5: 使用原生 CSS 覆盖 */
.no-focus-input input:focus {
  outline: none !important;
}

/* 方法6: 针对不同状态的完整覆盖 */
.no-focus-input :deep(.el-input__wrapper) {
  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.no-focus-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color, var(--el-border-color-hover)) inset;
}

.no-focus-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
}

/* 如果上述方法都不生效，尝试这个最强制的方法 */
.no-focus-input .el-input__wrapper.is-focus {
  box-shadow: none !important;
  border: 1px solid var(--el-input-border-color, var(--el-border-color)) !important;
}
</style>