首页 > 其他分享 >el-button点击了按钮会出现保留点击的状态

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

时间:2022-08-27 19:45:33浏览次数:46  
标签:el hover color 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;
    }
}

标签:el,hover,color,button,点击,按钮
From: https://www.cnblogs.com/echohye/p/16631304.html

相关文章

  • 小心使用select的length属性
    本文主要讲述两点:1.select在只有一个和多个的时候length代表的意义是不一样的2.怎么让length具有唯一的意义.先让我们看两个例子例1:<p><selectsize="1"name="D1"><opt......
  • xshell ssh隧道做socket代理上网
    一、xshellxshell选择想要访问的会话右键属性 ssh隧道添加连接打开隧道窗格转移规则 发现已打开二、火狐附加组件搜索添加组件 SwitchyOmega设置......
  • 7.4 SQL Server SELECT TOP
    SQLServerSELECTTOP目录SQLServerSELECTTOPSELECTTOP简介SELECTTOP示例1)使用具有固定值的TOP2)使用TOP返回行的百分比3)使用TOPWITHTIES来包括与最后一行中的......
  • python 报错 most likely due to a circular import 解决方法
    原因各个python文件,互相引用,造成的循环引用问题。解决方法:把需要引用的独立成一个文件,让其单向引用使用python写一个稍微大一点的工程时,经常会遇到循环import,即cicular......
  • ASP中把数据导出为Excel的三种方法
     方法一:用excel组件这种方法利用Excel组件直接导出excel文件,要求服务器端安装有微软office(Excel)程序,否则无法运行。完整示例如下:Setconn=server.CreateObject("adod......
  • 在使用element plus中select组件 关于下拉框位置偏移的解决方法
    造成原因:缩放屏幕时,下拉框会随着屏幕的缩放而偏移解决办法:el-select标签中使用popper-class设置teleported=“false”,再去修改你的样式到正确的位置上<el-select......
  • 20220827 使用EasyExcel导出复杂表格
    1、前言突然有个比较复杂的表格导出需求,写着挺好玩的,记录一下。需要实现的表格如图所示:先分析一下表格,可以看出大致分了四个区域:①第2-8行,②第9行,③第10-14行,④第15行。......
  • ElasticSearch高级用法之滚动查询
    由于es的限制,普通查询最多查询10000条数据,那么需要查询数据量大的情况怎么办呢?这个时候就可以使用滚动查询。代码如下://设置查询超时时间Scrollscroll=newS......
  • shell语句记录
    sed篇:1.删除指定的字符,比如'a'-----$sed's/a//'file2.移除每一行的第一个字符----$sed's/^.//'file3.移除每一行的最后一个字符---$sed's/.$//'file4.同......
  • SolidKits WeldmentPlus焊件增强工具
    SOLIDWORKS的多实体设计非常灵活高效,特别是利用结构焊件的设计方式,调用焊接轮廓,直接生成型材,也可以采用特征多实体,设计出板材、钣金等多实体零件。但是,如果不加规范,随意使......