vue3-elementPlus部分组件样式修改

news2024/9/29 15:35:17

前提:在less语言下使用/deep/;在sass语言下使用 ::v-deep 替换 /deep/

但::v-deep的写法已经废弃,建议使用:deep(css选择器)

elementUI样式修改:vue2-elementUI部分组件样式修改_vue2 圆圈选中样式-CSDN博客

 el-dropdown

//下拉框中文字颜色
:deep(.el-dropdown-menu__item:not(.is-disabled):focus)  {
  background-color: #f5f5f5;
  color: #A88D5B;
}
//去除下拉框边框
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

el-input

//改变输入框选中时边框颜色
.el-input {
  --el-input-focus-border-color: #88733c;
}

 el-select

//选中时下拉框边框颜色
:deep(.el-select__wrapper.is-focused){
  box-shadow: 0 0 0 1px #88733c inset !important;
}

el-tabs

//标签页选中时文字颜色
:deep(.el-tabs__item.is-active) {
  color: #a88d5b !important;
}
//标签页鼠标悬浮时文字颜色
:deep(.el-tabs__item:hover)  {
  color: #a88d5b !important; //悬浮
}

el-radio

//单选框颜色
:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #88733c !important;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background: #88733c !important;
  border-color: #88733c !important;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1410267.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

照片上的杂物怎么清除?这两个方法很好用

随着智能手机的普及和拍照技术的发展,我们经常会在社交媒体上分享自己的照片。然而,有时候拍摄的照片中会包含一些不必要的杂物,如电线、垃圾、阴影等,这些杂物会影响照片的美观度和视觉效果。这时候我们就需要借助工具来帮我们清…

ISA server2006 URL中文 报500错误

我在运维一个10几年前的老项目,有一个问题,一直困扰着我的客户。很久都没有解决。 表现就是在用中文搜索表单时,会看到如下的错误: 后来经过我的测试发现,只要是GET请求中传参包含中文时就必然出现这个报错。 探索…

Linux部署幻兽帕鲁服务器,PalWorld开服联机教程,保姆级教程

Linux系统搭建PalWorld私服,幻兽帕鲁开服联机教程,保姆级教程 最近这游戏挺火,很多人想跟朋友联机,如果有专用服务器,就不需要房主一直开着电脑,稳定性也好得多。 幻兽帕鲁简介 《幻兽帕鲁》是一款游戏作…

hdu1195 Open the lock 双向广度优先搜索

D-BFS 双向广度优先搜索 从起点和终点同时开始搜索&#xff0c;直到两个搜索的点相交&#xff0c;得到最短路径 Code: // D-BFS //by:MuQY #include <iostream> #include <algorithm> #include <string.h> #include <queue> #include <string> …

《WebKit 技术内幕》学习之十三(1):移动WebKit

1 触控和手势事件 1.1 HTML5规范 随着电容屏幕的流行&#xff0c;触控操作变得前所未有的流行起来。时至今日&#xff0c;带有多点触控功能已经成为了移动设备的标准配置&#xff0c;基于触控的手势识别技术也获得巨大的发展&#xff0c;如使用两个手指来缩放应用的大小等。…

【多线程】ThreadLocal 详解,举例说明

不理解多线程的同学可先了解多线程理论篇【多线程】线程是什么&#xff1f;多线程为什么&#xff1f;怎么做&#xff1f;通俗易懂讲解多线程 以及多线程进阶篇【多线程】多线程安全&#xff0c;为什么不安全&#xff0c;要怎么做保证其安全&#xff0c;实例 1、ThreadLocal是什…

快速入门Playwright框架:从零到自动化测试的第一步

Playwright框架&#xff1a; 背景介绍&#xff1a; ​ Playwright 是微软开发的 Web应用 的 自动化测试框架 。selenium相对于Playwright慢很多&#xff0c;因为Playwright是异步实现的&#xff0c;但是selenium是同步的&#xff0c;就是后一个操作必须等待前一个操作。 sel…

Python添加、修改和删除列表元素

Python 是一种简洁而强大的编程语言&#xff0c;广泛用于不同领域的软件开发和数据分析中。在 Python 中&#xff0c;列表&#xff08;List&#xff09;是一种非常常用的数据类型&#xff0c;用于存储一组元素并按顺序访问。本文将讨论如何在 Python 中对列表进行添加、修改和删…

[极客大挑战 2019]Upload1

直接上传php一句话木马&#xff0c;提示要上传image 把文件名改成gif并加上gif文件头后&#xff0c;绕过了对image类型的检测&#xff0c;但是提示文件内含有<?&#xff0c;且bp抓包后改回php也会被检测 那我们考虑使用js执行php代码 <script languagephp>eval($_PO…

mysql生成最近24小时整点最近30天最近12个月时间临时表

文章目录 生成最近24小时整点生成最近30天生成最近12个月 在统计的时候需要按时间来展示&#xff0c;但是数据的时间不一定是连续的&#xff0c;那就需要在代码里面生成连续的时间&#xff0c;然后按时间匹配到对应的数据&#xff0c;这样比较麻烦&#xff0c;可以在sql中使用连…

Transfomer相关最新研究

文章目录 LogTrans * (有代码&#xff09;TFT &#xff08;有代码&#xff09;InfluTran &#xff08;有代码&#xff09;Informer *&#xff08;有代码&#xff09;&#xff08;长时间&#xff09;ProTranAutoformer ***&#xff08;有代码&#xff09;AliformerPyraformer &a…

[蓝桥学习] 前缀和与差分

前缀和原理 特点 求区间和 如果要实现一边修改一边查询&#xff0c;需要使用树状树组和线段树。 例题 题目很简单&#xff0c;但是代码实现惊艳到我了&#xff0c;是L就加1&#xff0c;是Q就减1&#xff0c;如果区间 [i,j] 是平衡子串的话&#xff0c;那它会在前缀prefix i …

自己本机Video retalking制作数字人

首先需要注意的是&#xff0c;这个要求你的笔记本显存和内存都比较大。我的电脑内存是64G&#xff0c;显卡是8G&#xff0c;操作系统是Windows 11&#xff0c;勉强能够运行出来&#xff0c;但是效果不是很好。 效果如下&#xff0c;无法上传视频&#xff0c;只能通过图片展示出…

C++是如何发展起来的?如何学习C++呢?

一、什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c; 20世纪80年代&#xff0c; 计算机界提出了OOP(object …

YOLO 自己训练一个模型

一、准备数据集 我的版本是yolov8 8.11 这个目录结构很重要 ultralytics-main | datasets|coco|train|val 二、训练 编写yaml 文件 # Train/val/test sets as 1) dir: path/to/imgs, 2) file: path/to/imgs.txt, or 3) list: [path/to/imgs1, path/to/imgs2, ..] path…

(超全七大错误)Invalid bound statement (not found): com.xxx.dao.xxxDao.add

1.确保你把dao和mapper都在applicationContext.xml中都扫描了 xml文件 <bean id"sqlSessionFactory" class"org.mybatis.spring.SqlSessionFactoryBean"><property name"dataSource" ref"dataSource"/><property nam…

机器学习算法(一)

一、线性回归 线性回归&#xff08;Linear Regression&#xff09;可能是最流行的机器学习算法。线性回归就是要找一条直线&#xff0c;并且让这条直线尽可能地拟合散点图中的数据点。它试图通过将直线方程与该数据拟合来表示自变量&#xff08;x 值&#xff09;和数值结果&am…

sql管理工具archery简介

在平时的工作过程中&#xff0c;我们肯定会遇到使用sql平台的场景&#xff0c;业内也有很多工具&#xff0c;类似阿里云的dms&#xff0c;但是这个是和云厂商绑定的&#xff0c;我们可能一般没有用到阿里云组件就比较困难了&#xff0c;那还有什么选项了&#xff0c;经过调研&a…

自学C语言-6

第6章 选择结构程序设计 顺序结构程序设计最简单&#xff0c;但通常无法解决生活中的选择性问题。选择结构程序设计需要用到一些条件判断语句&#xff0c;可实现的程序功能更加复杂&#xff0c;程序的逻辑性与灵活性也更加强大。 本章致力于使读者掌握使用if语句进行条件判断的…

14.点亮 LED 灯

14.点亮 LED 灯 1. 应用层操控硬件的两种方式1.1 sysfs 文件系统1.2 sysfs 与 /sys1.3 总结 2. LED 硬件控制方式3. 编写 LED 应用程序4. 在开发板上测试 1. 应用层操控硬件的两种方式 应用层如何操控底层硬件&#xff0c;同样也是通过文件 I/O 的方式来实现&#xff0c;设备文…