解决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);
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具