el-button点击了按钮会出现保留点击的状态

问题
el-button点击了按钮之后,将鼠标移出按钮,会出现保留点击的状态

再查看它的css样式后,可以看到官方默认设置有:focus的状态规则

解决办法

在el-button的css里自定义或者复制原有的color、border-color、background-color三条样式,

然后再重写:hover方法就可以了,

其实就是覆盖官方样式

.el-button {
      margin-right: 10px;
      font-size: 16px;
      font-weight: 600;
      padding: 5px;

      // 因为el-button默认有focus状态,我们复制它的属性或者自定义下面三条属性就可以取消focus状态了
      // 但是hover也会被取消,所以得再写一个hover
      color: #606266;
      border-color: #DCDFE6;
      background-color: #fff;
    }

    .el-button:hover {
      color: #409EFF;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
}
posted @   槑孒  阅读(2387)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示