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

编写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>

效果

相关推荐
SystickInt1 分钟前
C语言 UTC时间转化为北京时间
c语言·开发语言
黎雁·泠崖8 分钟前
C 语言动态内存管理进阶:常见错误排查 + 经典笔试题深度解析
c语言·开发语言
成为大佬先秃头15 分钟前
渐进式JavaScript框架:Vue 过渡 & 动画 & 可复用性 & 组合
开发语言·javascript·vue.js
嘻嘻嘻开心18 分钟前
Java IO流
java·开发语言
JIngJaneIL38 分钟前
基于java+ vue家庭理财管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
hakesashou41 分钟前
python 随机函数可以生成字符串吗
开发语言·python
GISer_Jing42 分钟前
Taro跨端开发实战:JX首页实现_Trae SOLO构建
前端·javascript·aigc·taro
FakeOccupational44 分钟前
【经济学】 基本面数据(Fundamental Data)之 美国劳动力报告&非农就业NFP + ADP + 美国劳动力参与率LFPR
开发语言·人工智能·python
huluang1 小时前
Word文档批注智能克隆系统的设计与实现
开发语言·c#·word
superman超哥1 小时前
仓颉设计哲学核心:零成本抽象的实现原理与深度实践
开发语言·仓颉编程语言·仓颉·零成本抽象·仓颉设计