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>

效果

相关推荐
韩立学长11 分钟前
【开题答辩实录分享】以《基于Python的大学超市仓储信息管理系统的设计与实现》为例进行选题答辩实录分享
开发语言·python
东东51631 分钟前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设
froginwe1134 分钟前
Scala 循环
开发语言
catino35 分钟前
图片、文件的预览
前端·javascript
m0_706653231 小时前
C++编译期数组操作
开发语言·c++·算法
故事和你911 小时前
sdut-Java面向对象-06 继承和多态、抽象类和接口(函数题:10-18题)
java·开发语言·算法·面向对象·基础语法·继承和多态·抽象类和接口
Bruk.Liu1 小时前
(LangChain实战2):LangChain消息(message)的使用
开发语言·langchain
qq_423233901 小时前
C++与Python混合编程实战
开发语言·c++·算法
m0_715575341 小时前
分布式任务调度系统
开发语言·c++·算法
csbysj20202 小时前
选择(Selectable)
开发语言