uni-app 修改复选框checkbox选中后背景和字体颜色

news2024/11/25 12:12:48

编写css(注意:这个样式必须写在App.vue里)

/* 复选框 */
/* 复选框-圆角 */
checkbox.checkbox-round .wx-checkbox-input,
checkbox.checkbox-round .uni-checkbox-input {
    border-radius: 100rpx;
}
/* 复选框-背景颜色 */
checkbox.checkbox-backgroun-yellow[checked] .wx-checkbox-input,
checkbox.checkbox-backgroun-yellow.checked .uni-checkbox-input{
    background-color: #FFC457 !important;
    border-color: #FFC457 !important;
    color: #ffffff !important;
}

使用,在checkbox中的class中使用在round和checkbox-backgroun-yellow

<checkbox-group @change="signTypeChange">
  <label class="mr-10">
    <checkbox v-if="isShowSignIn" class="checkbox-backgroun-yellow" checked="true" value="1" >签到</checkbox>
  </label>
  <label>
    <checkbox v-if="isShowSignOut" class="checkbox-backgroun-yellow" checked="true" value="2" >签退</checkbox>
  </label>
</checkbox-group>

效果

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

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

相关文章

c++中mystring运算符重载

#include <iostream> #include <cstring>using namespace std;class mystring {char* buf; public:mystring(); //构造函数mystring(const char * str); //构造函数mystring(const mystring& str); //深拷贝函数void show(); //输出函数void setmystr(const my…

oracle数据恢复—通过拼接数据库碎片的方式恢复Oracle数据的案例

Oracle数据库故障&#xff1a; 存储掉盘超过上限&#xff0c;lun无法识别。管理员重组存储的位图信息并导出lun&#xff0c;发现linux操作系统上部署的oracle数据库中有上百个数据文件的大小变为0kb。数据库的大小缩水了80%以上。 取出&并分析oracle数据库的控制文件。重组…

SpringBoot中小企业人事管理系统:设计模式

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;中小企业人事管理系统当然也不能排除在外。中小企业人事管理系统是以实际运用为开发背景&#xff0c;运用软件工程原理和…

git分支合并某一次提交

1.A分支&#xff1a;使用git log --oneline查看需要合并的id 或者直接去Git仓库查看提交记录 2.B分支&#xff1a;git cherry-pick id 合并A分支的请求

NFS文件服务器

持久化存储&#xff1a;NFS 1 NFS 工作原理 NFS&#xff08;Network File System&#xff09;是一种分布式文件系统协议&#xff0c;它允许用户在网络上通过一个网络共享访问文件&#xff0c;就如同访问本地存储一样。NFS 工作时&#xff0c;服务端将文件系统中的一个或多个目…

Springboot 整合 Java DL4J 搭建智能问答系统

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

Android kotlin之配置kapt编译器插件

配置项目目录下的gradle/libs.versions.toml文件&#xff0c;添加kapt配置项&#xff1a; 在模块目录下build.gradle.kt中增加 plugins {alias(libs.plugins.android.application)alias(libs.plugins.jetbrains.kotlin.android)// 增加该行alias(libs.plugins.jetbrains.kotl…

设计模式:4、命令模式(双重委托)

目录 0、定义 1、命令模式包括四种角色 2、命令模式的UML类图 3、代码示例 0、定义 将一个请求封装为一个对象&#xff0c;从而使用户可用不同的请求对客户进行参数化&#xff1b;对请求排队或记录请求日志&#xff0c;以及支持可撤销的操作。 1、命令模式包括四种角色 接…

详细教程-Linux上安装单机版的Hadoop

1、上传Hadoop安装包至linux并解压 tar -zxvf hadoop-2.6.0-cdh5.15.2.tar.gz 安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1u59OLTJctKmm9YVWr_F-Cg 提取码&#xff1a;0pfj 2、配置免密码登录 生成秘钥&#xff1a; ssh-keygen -t rsa -P 将秘钥写入认…

短剧系统小程序开发产品设计实例解析

短剧系统小程序开发架构深度解析引言 随着数字娱乐市场的蓬勃发展&#xff0c;短剧因其紧凑的情节、创新的表现形式和便捷的观看体验&#xff0c;迅速吸引了大量观众的关注。作为承载短剧内容的重要平台&#xff0c;短剧系统小程序不仅需要在用户体验、内容管理等方面做到极致&…

STM32--JLINK下载问题记录

1.下载提示&#xff1a; 现象&#xff1a;keil下载&#xff0c;会提示如上信息&#xff1b; 使用segger jflash可以连接成功&#xff0c;但是下载程序会失败&#xff1b; 解决过程&#xff1a;尝试一边复位一边下载程序&#xff0c;一直失败&#xff1b;STM32CubeProgrammer也…

推荐算法(基于用户/物品的协同过滤算法)

1.1 推荐算法概述 信息过载的时代。信息消费者面临的问题是如何收集到自己感兴趣的信息。对于信息生产者来说&#xff0c;高效地把信息推送给感兴趣的信息消费者&#xff0c;而不是淹没在信息互联网的海洋之中&#xff0c;也非常困难。 如何从大量的数据信息中获取有价值的信息…

【PCIE常见面试问题-1】

PCIE常见面试问题-1 1 PCIE概述1.1 PCI为何发展开PCIE&#xff1f;1.2 什么是Root Complex(RC)1.3 什么是EP&#xff1f;1.4 什么是Swith1.5 PCIE协议如何组织通信的&#xff1f;1.6 简要介绍一下PCIE的分层结构&#xff0c;为什么需要分层&#xff1f;1.7 PCIE的事务类型有哪些…

Easyexcel(5-自定义列宽)

相关文章链接 Easyexcel&#xff08;1-注解使用&#xff09;Easyexcel&#xff08;2-文件读取&#xff09;Easyexcel&#xff08;3-文件导出&#xff09;Easyexcel&#xff08;4-模板文件&#xff09;Easyexcel&#xff08;5-自定义列宽&#xff09; 注解 ColumnWidth Data…

C++进阶:哈希表实现

目录 一:哈希表的概念 1.1直接定址法 1.2哈希冲突 1.3负载因子 1.4实现哈希函数的方法 1.4.1除法散列法/除留余数法 1.4.2乘法散列法 1.4.3全域散列法 1.5处理哈希冲突 1.5.1开放地址法 线性探测 二次探测 ​编辑 双重散列 1.5.2链地址法 二.代码实现 2.1开放地址…

汽车资讯新趋势:Spring Boot技术解读

5系统详细实现 5.1 管理员模块的实现 5.1.1 用户信息管理 汽车资讯网站的系统管理员可以管理用户&#xff0c;可以对用户信息修改删除审核以及查询操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.1.2 汽车品牌管理 系统管理员可以汽车品牌信息进行添加&#xf…

EdgeNeXt:面向移动视觉应用的高效融合CNN-Transformer架构

摘要 https://arxiv.org/pdf/2206.10589 为了追求更高的准确性&#xff0c;通常会开发大型且复杂的神经网络。这些模型需要高计算资源&#xff0c;因此无法部署在边缘设备上。构建资源高效通用网络在多个应用领域都非常有用&#xff0c;因此备受关注。在本研究中&#xff0c;我…

udp_socket

文章目录 UDP服务器封装系统调用socketbind系统调用bzero结构体清0sin_family端口号ip地址inet_addrrecvfromsendto 新指令 netstat -naup (-nlup)包装器 的两种类型重命名方式包装器使用统一可调用类型 关键字 typedef 类型重命名系统调用popen UDP服务器封装 系统调用socket …

Spring Boot教程之五:在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序

在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序 IntelliJ IDEA 是一个用 Java 编写的集成开发环境 (IDE)。它用于开发计算机软件。此 IDE 由 Jetbrains 开发&#xff0c;提供 Apache 2 许可社区版和商业版。它是一种智能的上下文感知 IDE&#xff0c;可用于在各种应用程序…

高效高质量SCI论文撰写及投稿流程及策略丨从论文选题、文献调研、实验设计、数据分析、论文结构及语言规范等重要环节

科学研究的核心在于将复杂的思想和实验成果通过严谨的写作有效地传递给学术界和工业界。对于研究生、青年学者及科研人员&#xff0c;如何高效撰写和发表SCI论文&#xff0c;成为提升学术水平和科研成果的重要环节。本教程旨在帮助学员系统掌握从选题到投稿的全过程&#xff0c…