Vue 3 + Element Plus：Checkbox Button的hover/active/选中颜色修改无效求助

Element Plus的Checkbox Button组件自带样式隔离，直接用普通的:hover/:active选择器大概率会被内置样式覆盖，或者因为Vue的scoped样式无法穿透到组件内部，下面是具体的解决办法：

方法一：带scoped样式的组件内穿透 #

如果你的样式写在带scoped的<style>标签里，必须用Vue3的深度选择器:deep()来穿透到组件内部元素：

<style scoped>
/* 选中状态 */
:deep(.el-checkbox-button.is-checked) {
  background-color: #276ef1;
  border-color: #276ef1;
  color: #fff;
}

/* 未选中时的hover状态 */
:deep(.el-checkbox-button:not(.is-checked):hover) {
  background-color: #eaf4ff;
  border-color: #9ec5fe;
  color: #276ef1;
}

/* 未选中时的active状态 */
:deep(.el-checkbox-button:not(.is-checked):active) {
  background-color: #c9e2ff;
  border-color: #66a3ff;
  color: #276ef1;
}
</style>

方法二：全局样式修改 #

如果是在全局样式文件（比如main.css）或者不带scoped的<style>标签里写样式，直接用组件类名即可，不需要深度选择器：

/* 选中状态 */
.el-checkbox-button.is-checked {
  background-color: #276ef1;
  border-color: #276ef1;
  color: #fff;
}

/* 未选中时的hover状态 */
.el-checkbox-button:not(.is-checked):hover {
  background-color: #eaf4ff;
  border-color: #9ec5fe;
  color: #276ef1;
}

/* 未选中时的active状态 */
.el-checkbox-button:not(.is-checked):active {
  background-color: #c9e2ff;
  border-color: #66a3ff;
  color: #276ef1;
}

关键注意点 #

• 必须加not(.is-checked)来区分状态，不然hover/active样式会覆盖选中状态的样式。
• 如果还是不生效，打开浏览器开发者工具，查看Element Plus原始样式的优先级，必要时可以临时加!important（尽量少用，避免样式冲突）：

:deep(.el-checkbox-button.is-checked) {
  background-color: #276ef1 !important;
  border-color: #276ef1 !important;
  color: #fff !important;
}

内容的提问来源于stack exchange，提问作者KutayM