首页 > 其他分享 >el-button在chrome低版本(<88)中显示异常的问题

el-button在chrome低版本(<88)中显示异常的问题

时间:2023-01-12 11:00:23浏览次数:46  
标签:el chrome 低版本 button -- text border color

1、问题内容:el-button 按钮显示灰色背景色和边框。【浏览器版本:chrome 75】

 

2、问题原因:el-button使用的:not(xxx,xxx,xxx),以逗号分隔的选择器列表作为参数是实验性的,尚未获得广泛支持

1 .el-button:not(.is-text, .is-link, .el-button--text) {
2     background-color: var(--el-button-bg-color);
3     border: var(--el-border);
4     border-color: var(--el-button-border-color);
5 }

 

3、浏览器支持情况如下:

 

 4、解决方案:修改 element-plus/dist/index.css 对应的代码

  • 源代码
 1 .el-button:not(.is-text, .is-link, .el-button--text):focus,
 2 .el-button:not(.is-text, .is-link, .el-button--text):hover {
 3     color: var(--el-button-hover-text-color);
 4     border-color: var(--el-button-hover-border-color);
 5     background-color: var(--el-button-hover-bg-color);
 6     outline: 0
 7 }
 8 
 9 .el-button:not(.is-text, .is-link, .el-button--text):active {
10     color: var(--el-button-active-text-color);
11     border-color: var(--el-button-active-border-color);
12     background-color: var(--el-button-active-bg-color);
13     outline: 0
14 }
15 
16 .el-button:not(.is-text, .is-link, .el-button--text):focus-visible {
17     border-color: transparent;
18     outline: 2px solid var(--el-button-border-color);
19     outline-offset: 1px
20 }
  • 修改后代码
 1 .el-button:not(.is-text),.el-button:not(.is-link),.el-button:not(.el-button--text) {
 2     background-color: var(--el-button-bg-color);
 3     border: var(--el-border);
 4     border-color: var(--el-button-border-color)
 5 }
 6 
 7 .el-button:not(.is-text):focus,.el-button:not(.is-link):focus,.el-button:not(.el-button--text):focus,
 8 .el-button:not(.is-text):hover,.el-button:not(.is-link):hover,.el-button:not(.el-button--text):hover {
 9     color: var(--el-button-hover-text-color);
10     border-color: var(--el-button-hover-border-color);
11     background-color: var(--el-button-hover-bg-color);
12     outline: 0
13 }
14 
15 .el-button:not(.is-text):active,.el-button:not(.is-link):active,.el-button:not(.el-button--text):active {
16     color: var(--el-button-active-text-color);
17     border-color: var(--el-button-active-border-color);
18     background-color: var(--el-button-active-bg-color);
19     outline: 0
20 }
21 
22 el-button:not(.is-text):focus-visible,.el-button:not(.is-link):focus-visible,.el-button:not(.el-button--text):focus-visible {
23     border-color: transparent;
24     outline: 2px solid var(--el-button-border-color);
25     outline-offset: 1px
26 }

 

标签:el,chrome,低版本,button,--,text,border,color
From: https://www.cnblogs.com/SimpleTian/p/17045809.html

相关文章

  • getopts解析shell脚本命令行参数
    getopts命令格式getoptsoptstringname[arg]optstring为命令行所有选项组成的字符串,每个字母代表一个选项。如果字母后有冒号:,表明该选项需要选择参数。比如说,执行get......
  • R语言:In `[<-.factor`(`*tmp*`, thisvar, value = " ") : invalid factor level, NA
    使用命令时出现报错:count3=read.table("summary.txt",header=T,sep="\t")count3[is.na(count3)]<-"rs111"In`[<-.factor`(`*tmp*`,thisvar,value="rs111"):......
  • chrome-headless
    window命令使用找打chrome安装的位置,默认在C:\ProgramFiles\Google\Chrome\Application然后无头启动./chrome.exe--headless--remote-debugging-port=9222https......
  • elasticsearch 安装 install 中文 分词器 Analysis 插件 plugin
    目录概述github上开源中文分词器仓库在elasticsearch上安装插件概述在github上查找开源的中文分词器插件仓库在elasticsearch上安装插件github上开源中文分词器仓......
  • SpringBoot+Mybatis-plus整合easyExcel批量导入Excel到数据库+导出Excel
    SpringBoot+Mybatis-plus整合easyExcel批量导入Excel到数据库+导出Excel 一、前言今天小编带大家一起整合一下easyExcel,之所以用这个,是因为easyExcel性能比较好,不会......
  • elemnet-plus 使用总结
    1.el-date-picker设置起始周的日期备注:如果添加dayjs.en.weekStart=2不起作用需要检查是否添加了el-config-provider语言设置或者在app.vue中添加<template><......
  • Vue 之 element 输入框验证及常用正则
    1.控制输入位数限制输入为10位,这种方式可以使输入框中输入10位后不能输入后续内容因为number输入框自动将最后一位小数点忽略不计,因此“.”,"2.","3.3."这三种情况均为......
  • 鸡肋的powershell后台任务
    背景:   需做一个这样小脚本:启动监控windows某个东西状态变化,用powershell启动可以,但使用cmdbat掉用无法生效。问题:做个简单实验:  如下一段最简单powershell......
  • linux xshell 命令上传下载文件
     有些堡垒机运维用xshell,但没xftp,使用xshell+命令上传文件rz,sz是便是Linux/Unix同Windows进行ZModem文件传输的命令行工具,所以要在Xshell连接属性中的设置上传协议为Zm......
  • elasticsearch之exists查询
    一、exists查询简介elasticsearch提供了exists查询,用以返回字段存在值的记录,默认情况下只有字段的值为null或者[]的时候,elasticsearch才会认为字段不存在;exists查询的形......