解决el-button的:focus引起的样式问题

问题描述

当点击按钮时,按钮处于灰色状态,但是鼠标移出按钮,按钮并没有回复成原本的颜色

问题产生原因

在鼠标点击按钮后,按钮处于:focus状态

// element的源码
.el-button:focus,
.el-button:hover {
color: var(--el-button-hover-text-color);
border-color: var(--el-button-hover-border-color);

outline: 0;
}

解决方法

在全局样式中,把按钮的:focus样式设置成按钮原本的样子,只让按钮在鼠标悬浮按钮时发生颜色变化

.el-button:focus {
  color: var(--el-button-text-color);
 
  border-color: var(--el-button-border-color);
}
 
posted @ 2023-08-26 14:35  zhiyaohaha  阅读(297)  评论(0编辑  收藏  举报