当前位置: 首页 > 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.jsqmd.com/news/3340/

相关文章:

  • DataGrip格式化SQL模板
  • 靶向肽Dcpep - 教程
  • 计算机毕设java毕业生档案流向追踪系统的设计与实现 基于Java的毕业生档案管理与追踪系统的设计与实现 Java技术驱动的毕业生档案流向监测架构开发
  • 图思维胜过链式思维:JGraphlet构建任务流水线的八大核心原则
  • 两月九城,纷享销客渠道携手伙伴共创CRM新纪元
  • el-upload上传图片
  • C. Strange Function
  • 剑指offer-33、丑数
  • C#操作Excel核心要点:告别手动,拥抱自动化
  • 250925
  • 云平台qcow2镜像的制作
  • 使用责任链模式简化if-else代码示例
  • hf 下载模型
  • SQLAlchemy -> Base.metadata.create_all(engine )详解 - 实践
  • 使用Function Interface简化if-else代码示例
  • Up
  • Transformer 面试题及详细答案120道(51-60)-- 模型变体与改进 - 详解
  • Dockerfile构建镜像以及网络 - 详解
  • 详细介绍:2026毕设-基于Spring Boot的在线海鲜市场交易平台的设计与实现
  • 【源码解读之 Mybatis】【基础篇】-- 第3篇:SqlSession的创建与生命周期
  • AI智慧:于来路与关山之间,活在当下
  • 基于Qt和FFmpeg的安卓监控模拟器/手机摄像头模拟成onvif和28181设备
  • 详细介绍:Flink 2.x 独立集群(Standalone) 的部署
  • 瑞芯微RK3506核心板/开发板DSM音频开发实战,关键知识点与实操案例必看攻略! - 教程
  • 不只是一台玩具车:开源燃料电池机器人HydroBot全揭秘 - 实践
  • 在AI技术唾手可得的时代,挖掘新需求成为核心竞争力——某知名窗口管理工具需求洞察
  • OS-KylinV10-加载动态库运行异常-全局函数重名或未使用命名空间
  • 详细介绍:【代码】关于C#支持文件和文本框的简单日志实现
  • 前端笔记:vue中 Map、Set之间的采用和区别
  • 性能暴涨50%:PD分离KV cache传输的实战干货