当前位置: 首页 > news >正文

elementuiplus修改el-checked多选框样式

废话不多说直接上代码:

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.gsyq.cn/news/11367.html

相关文章:

  • DataGrip格式化SQL模板
  • 计算机毕设java毕业生档案流向追踪系统的设计与实现 基于Java的毕业生档案管理与追踪系统的设计与实现 Java技术驱动的毕业生档案流向监测架构开发
  • C. Strange Function
  • 详细介绍:2026毕设-基于Spring Boot的在线海鲜市场交易平台的设计与实现
  • 详细介绍:Flink 2.x 独立集群(Standalone) 的部署
  • 在AI技术唾手可得的时代,挖掘新需求成为核心竞争力——某知名窗口管理工具需求洞察
  • OS-KylinV10-加载动态库运行异常-全局函数重名或未使用命名空间
  • 详细介绍:【代码】关于C#支持文件和文本框的简单日志实现
  • dremio 26.0.5社区版发布
  • 深度互联:金兰契协议下的领域知识与元智慧共生
  • 今天我看了
  • 【stm32-FOC】初步认识 CMSIS-DSP
  • US$368 Lonsdor K518ISE SKE-IT Smart Key Emulator 5 in 1 Set
  • US$1090 VVDI2 AUDI VW 4th amp; 5th IMMO Functions Authorization Service
  • 提示词工程与上下文工程核心洞察总结报告
  • # ️ 注册中心原理与选型指南
  • 苍穹外卖-day10(spring Task,WebSocket,来单提醒客户催单) - a
  • 在CodeBolcks下wxSmith的C++编程教程——使用wxPanel资源
  • 虚拟机开机网络连接失败
  • codeforces 1053 div2
  • 随机过程学习笔记
  • Easysearch 国产替代 Elasticsearch:8 大核心问题解读
  • Error response from daemon: could not select device driver nvidia with capabilities: [[gpu]]
  • 全内存12306抢票系统设计:基于位运算的高效席位状态管理
  • 第三天
  • Strong duality
  • newDay03
  • Facebook怎么高效采集材料?
  • 2025.9.24总结 - A
  • 给自己的网站增加在线客服功能,还能接入智能大模型知识库