解决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 @   zhiyaohaha  阅读(385)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示