elementuiplus修改el-checked多选框样式

news/2025/9/26 12:02:01/文章来源:https://www.cnblogs.com/zj6666/p/19110593

废话不多说直接上代码:

1、给check加类名

image

 

2、css样式:

/deep/.image-checkbox .el-checkbox__input .el-checkbox__inner {
  /* 隐藏原生复选框 */
  display: none;
}

/deep/.image-checkbox .el-checkbox__input {
  /* 使用背景图片 */
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/deep/.image-checkbox .el-checkbox__input.is-checked {
  background-image: url('../../../assets/details/xz.png');
}

/deep/.image-checkbox .el-checkbox__input:not(.is-checked) {
  background-image: url('../../../assets/details/wxz.png');
}
/* 方法一的样式补充 */
/deep/.image-checkbox .el-checkbox__input {
  width: 20px;  /* 设置宽度 */
  height: 20px; /* 设置高度 */
  background-size: contain; /* 保持图片比例 */
}
 
最后的结果:

image

 

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

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

相关文章

怎样用dw做 网站首页网站关键词排行查询

首先,对于零基础的想学习C的同学,我想要你们先明白一件事:C是一门极为复杂且难以掌握的编程语言。因此推荐在学习C之前可以先去学习C语言,在拥有了一定的知识储备和编程能力后再学习C会更加的高效和相对轻松。 下面推荐从三个方面…

宜昌营销网站建设ppt模板免费下载素材医学类

一,dns与域名 网络基于tcp/ip协议进行通信和连接的,其中主机以ip地址做固定的地址标识,用以区分用户和计算机。ip地址是由32位二进制数组成,不方便记忆。为了方便记忆,采用了域名。但是网络通信的唯一标识是ip地址&…

DataGrip格式化SQL模板

个人使用比较好的,各位可以根据自己的使用习惯自行调整。 点击下载

靶向肽Dcpep - 教程

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

做一个网站完整的网页app软件开发sh365

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第一章 Python 机器学习入门之pandas的使用 文章目录 系列文章目录前言一、空间范围中点位数量的快速统计算法1.引入库2.百度地图基于范围的搜索 Java 前…

企业网站制作机构排名wordpress html音乐

基于STM32单片机多功能智能小车功能说明: TFTLCD显示按键LVGL(菜单、小车工作模式选择、设置)手机蓝牙遥控模式射频手柄遥控模式5路红外寻迹模式超声波避障模式语音播报低功耗控制 硬件原理图设计 单片机最小系统: 由于要使用…

怎么做盗号网站手机开发一个小程序游戏要多少钱

617.合并二叉树(经典) 合并二叉树是操作两棵树的题目里面很经典的,如何对两棵树遍历以及处理? 给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠。 你需要将他们合并…

在库言库建筑网站网页制作模板田田田田田田田田田田田田田田

1 vi 简介vi 编辑器是 Linux 和 Unix 上最基本的文本编辑器,工作在字符模式下。由于不需要图形界面,vi 是效率很高的文本编辑器。尽管在 Linux 上也有很多图形界面的编辑器可用,但 vi 在系统和服务器管理中的功能是那些图形编辑器所无法比拟的…

图思维胜过链式思维:JGraphlet构建任务流水线的八大核心原则

JGraphlet是一个轻量级零依赖的Java任务流水线库,采用有向无环图模型管理任务依赖关系。支持同步/异步任务混合执行、显式API设计、扇入输入处理、资源生命周期管理、上下文共享和可选缓存机制,适用于并行检索、数据…

两月九城,纷享销客渠道携手伙伴共创CRM新纪元

9月18日,SCEE 2025 中国软件渠道生态大会华南峰会在深圳成功举办。纷享销客作为中国 CRM 行业领导者再度登台,全国渠道运营负责人冯涛发表《智享未来,创领CRM新纪元》主题演讲,向华南区域伙伴全面传递纷享销客渠道…

el-upload上传图片

<el-upload上传图片1 官方文档文档2 说明这个组件提供了一种默认的上传模式,点击图片上传的时候就自动把图片发送到服务端,而不是在提交表单的时候上传。这钟模式不够灵活,也可以设置不自动上传到服务器,自己提…

wordpress 爱奇艺插件下载专业的网站优化公司

一、ADC简介 ADC是Analog-to-DigitalConverter的缩写。指模/数转换器或者模拟/数字转换器。是指将连续变量的模拟信号转换为离散的数字信号的器件。典型的模拟数字转换器将模拟信号转换为表示一定比例电压值的数字信号。 STM32f103 系列有3个ADC&#xff0c;精度为12位&#xf…

东莞网站建设企业营销型网站建设哪家好

1、第一步肯定是要新建自己还原的目标数据库&#xff0c;例如&#xff1a; 2、进入postgresql的安装目录下的bin目录下 然后地址栏输入cmd进入命令 输入以下 psql -h localhost -U postgres -p 5432 -d SamsinoYardStandard_karamay -f "D:\desktop\zk\20230628.bak&quo…

做网站为什么要用php哈尔滨做设计和网站的公司吗

前几天讲了数据分析中SQL的基本使用方法以及具体案例分析思路&#xff0c;接下来会继续讲统计基础以及在SAS软件内的应用&#xff0c;在这之前&#xff0c;本文先进行SAS基础使用编程的基础介绍&#xff0c;后续会主要阐述SAS软件内的统计数学的应用&#xff0c;如分析或初步建…

学校微网站模板下载建设网站优化

每天学习一个Linux命令之paste 介绍 在Linux系统中&#xff0c;有许多强大而实用的命令&#xff0c;它们可以帮助我们更高效地处理文本文件。其中一个有趣的命令就是paste。paste命令可以将多个文件的内容按列合并&#xff0c;并输出到标准输出或指定的文件中。 在本篇博客中…

建设网站群的指导思想龙岗爱联网站建设

导读&#xff1a; 前面章节&#xff0c;我们讲到过 接口&#xff08;Interface&#xff09;可以用于对「对象的形状&#xff08;Shape&#xff09;」进行描述。 本章节主要介绍接口的另一个用途&#xff0c;对类的一部分行为进行抽象。 类配合实现接口 实现&#xff08;impleme…

淘宝网站建设方式建网站企划书

一&#xff0c;spring集成Mybatis的概念 Spring 整合 MyBatis 是将 MyBatis 数据访问框架与 Spring 框架进行集成&#xff0c;以实现更便捷的开发和管理。在集成过程中&#xff0c;Spring 提供了许多特性和功能&#xff0c;如依赖注入、声明式事务管理、AOP 等 它所带来给我们的…

上海骏域网站建设专家从化企业网站建设

俗话说“好记性不如烂笔头”&#xff0c;编程的海洋如此的浩大&#xff0c;养成做笔记的习惯是成功的一步&#xff01; 此笔记主要是antlr4.13版本的笔记&#xff0c;并且笔记都是博主自己一字一字编写和记录&#xff0c;有错误的地方欢迎大家指正。 一、基础概念&#xff1a;…

正能量网站入口地址网站建设属于哪个行业分类

PHP 循环 - While 循环循环执行代码块指定的次数&#xff0c;或者当指定的条件为真时循环执行代码块。PHP 循环在您编写代码时&#xff0c;您经常需要让相同的代码块一次又一次地重复运行。我们可以在代码中使用循环语句来完成这个任务。在 PHP 中&#xff0c;提供了下列循环语…