首页 > 其他分享 >解决el-button的:focus引起的样式问题

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

时间:2023-08-26 14:45:14浏览次数:31  
标签:el color button focus 按钮 border

问题描述

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

问题产生原因

在鼠标点击按钮后,按钮处于: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);
}
 

标签:el,color,button,focus,按钮,border
From: https://www.cnblogs.com/bozhiyao/p/17658785.html

相关文章

  • hdu:不容易系列之(3)—— LELE的RPG难题
    ProblemDescription人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即”可乐”),经过多方打探,某资深Cole终于知道了原因,原来,LELE最近研究起了著名的RPG难题:有排成一行的n个方格,用红(Red)、粉(Pink)、绿(Green)三色涂每个格子,每格涂一色,要......
  • [CF1794E] Labeling the Tree with Distances 题解
    [CF1794E]LabelingtheTreewithDistances题解题目描述给你一个树,边权为\(1\)。给定\(n-1\)个数,你需要将这些数分配到\(n-1\)个节点上。一个点\(x\)是好的,当且仅当存在一种分配方案,所有被分配数的点到\(x\)的最短路径长度等于其被分配的数。求所有好点。思路从......
  • SSCRFIELDS
     这样的按钮是怎么实现的?top里面引入表TABLES:t001,sscrfields.. 选择屏幕的里面写*--·begin测试选择屏幕增加按钮SELECTION-SCREEN:FUNCTIONKEY1.SELECTION-SCREEN:FUNCTIONKEY2.SELECTION-SCREEN:FUNCTIONKEY3.SELECTION-SCREEN:FUNCTIONKEY4.SELEC......
  • Hello Cuda(三)——VSCODE&LibTorch
    CMAKEListscmake_minimum_required(VERSION3.0FATAL_ERROR)project(example)set(CMAKE_PREFIX_PATH/home/xuliangyu/libtorch)set(Torch_DIR/home/shiyanshi/libtorch/share/cmake/)#修改这里为自己的libtorchcmake路径,也可以用pytorch安装时编译的pkg里的cmakefind......
  • excel 获取日期的该月第一天
    excel获取日期是该月第几天dayexcel获取日期的该月第一天默认情况下,1900年1月1日的序列号是1,而2008年1月1日的序列号是39448,这是因为它距1900年1月1日有39448天......
  • vue+element根据表单中选项切换,更改表单验证规则
    表单:<el-form-itemlabel="周期间隔(天)"prop="periodSpace"v-if="isServicePeriod"><el-inputv-model="form.periodSpace"type="number"placeholder="请输入周期间隔(天)"/></el-form-item>data:......
  • ORACLE SELECT INTO 赋值为空,抛出 NO DATA FOUND 异常
    例子:DECLAREORDER_NUMVARCHAR2(20);BEGINSELECTS.ORDER_NUMINTOORDER_NUMFROMSALES_ORDERSWHERES.ID=122344;DBMS_OUTPUT.PUT_LINE('单号:'||ORDER_NUM);END;在查询结果为空的情况下,以上代码会报错:未找到任何数据解决方法:改为SELECTMAX(S.ORDER_NUM)INTO......
  • shell命令概述 Shell作用:命令解释器 介于操作系统内核与用户之间,负责解释命令行 获得
    shell命令概述Shell作用:命令解释器介于操作系统内核与用户之间,负责解释命令行获得命令帮助内部命令help命令的“--help”选项使用man命令阅读手册页命令行编辑的几个辅助操作Tab键:自动补齐反斜杠“\”:强制换行快捷键Ctrl+U:清空至行首快捷键Ctrl+K:清空至行尾快捷键Ctr......
  • shell命令概述 Shell作用:命令解释器 介于操作系统内核与用户之间,负责解释命令行 获得
    shell命令概述Shell作用:命令解释器介于操作系统内核与用户之间,负责解释命令行获得命令帮助内部命令help命令的“--help”选项使用man命令阅读手册页命令行编辑的几个辅助操作Tab键:自动补齐反斜杠“\”:强制换行快捷键Ctrl+U:清空至行首快捷键Ctrl+K:清空至行尾快捷键Ctr......
  • 安装celery后,提示WARNING/MainProcess...you should set broker_connection_retry_on_
    调用了Celery的config_from_object方法,并新建文件celery_config.py存放设置 在celery中设置broker_connection_retry_on_startup=True 效果没有提示了。 ......