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>

效果

相关推荐
AI人H哥会Java11 分钟前
【JAVA】Java基础—面向对象编程:常用API与数据结构—字符串、数组的使用
java·开发语言
沐泽Mu30 分钟前
嵌入式学习-C嘎嘎-Day06
开发语言·c++·学习
战族狼魂1 小时前
C#的数据类型总结:decimal ,double,float的区别
开发语言·c#
0x派大星1 小时前
【Golang】——Gin 框架中的 API 请求处理与 JSON 数据绑定
开发语言·后端·golang·go·json·gin
卡卡_R-Python1 小时前
关联度分析、灰色预测GM(1,1)、GM(1,1)残差模型——基于Python实现
开发语言·python
醒过来摸鱼1 小时前
Golang时间操作
开发语言·python·golang
《源码好优多》1 小时前
基于Java Springboot动漫周边商城
java·开发语言·spring boot
IU宝1 小时前
类和对象——static 成员,匿名对象(C++)
开发语言·c++·算法
踏雪羽翼1 小时前
android 使用MediaPlayer实现音乐播放--获取音乐数据
android·开发语言·获取音乐数据