Element-UI Button 点击后背景色如何消失

Element-UI是Vue生态中常用的UI组件库，其中的Button组件在点击后默认会保留一段时间的背景色高亮效果，部分场景下这种效果不符合设计需求，需要手动将其消除。这种背景色主要来源于浏览器自带的点击高亮反馈和Element-UI组件内置的点击状态样式。

问题产生的原因

点击Button后背景色不消失主要有两类原因：

• 浏览器默认的-webkit-tap-highlight-color样式，会在点击元素时添加半透明的高亮背景，移动端浏览器该效果更明显
• Element-UI的Button组件在点击时触发了:active或者:focus伪类样式，这些样式在点击动作结束后没有及时移除

解决方案

方案一：全局修改浏览器默认高亮样式

如果需要全局消除所有可点击元素的点击高亮背景，可以在全局样式文件中添加如下代码：

/* 全局消除点击高亮背景 */
* {
  -webkit-tap-highlight-color: transparent;
}

这种方式会影响所有元素的点击高亮效果，适合需要统一移除该样式的项目。

方案二：局部覆盖Element-UI Button的点击样式

如果只需要修改Button组件的点击背景色，可以通过覆盖组件的伪类样式实现，注意不要遗漏样式穿透，因为Element-UI的组件样式通常有作用域限制。

/* 使用/deep/或者::v-deep穿透作用域，覆盖Button的点击样式 */
/deep/ .el-button:active,
/deep/ .el-button:focus {
  background-color: transparent !important;
  border-color: transparent !important;
}

如果使用的是Vue3的<style scoped>，可以把/deep/替换为::v-deep。

方案三：通过点击事件手动控制样式

如果需要在特定点击场景下才移除背景色，可以通过绑定点击事件，在点击后手动修改样式：

<template>
  <div>
    <el-button 
      class="custom-btn" 
      @click="handleClick"
    >
      点击按钮
    </el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 点击后移除背景色相关样式
      const btn = document.querySelector('.custom-btn');
      btn.style.backgroundColor = 'transparent';
      btn.style.borderColor = 'transparent';
    }
  }
}
</script>

<style scoped>
/* 穿透修改按钮默认点击状态 */
::v-deep .custom-btn:active {
  background-color: transparent !important;
}
</style>

方案四：修改Button组件的focus状态样式

部分场景下点击后背景色是由于组件处于focus状态导致的，可以通过修改focus样式消除：

/* 移除Button的focus状态背景 */
.el-button:focus {
  background-color: inherit;
  border-color: inherit;
}

注意事项

修改样式时如果使用!important要谨慎，避免影响其他组件的样式表现。如果是局部修改，建议给目标Button添加单独的class，避免全局样式污染。另外如果项目中使用了CSS预处理器，穿透语法的写法可能会有差异，需要根据实际使用的预处理器调整。

Element-UIButton背景色click_event样式修改修改时间：2026-06-15 16:06:33