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>

效果

相关推荐
你的冰西瓜12 小时前
C++中的array容器详解
开发语言·c++·stl
JQLvopkk12 小时前
Vue框架技术详细介绍及阐述
前端·javascript·vue.js
笔COOL创始人12 小时前
requestAnimationFrame 动画优化实践指南
前端·javascript·面试
sophie旭12 小时前
性能监控之首屏性能监控小实践
前端·javascript·性能优化
随丶芯12 小时前
IDEA安装leetcode-editor插件
java·开发语言
Ccjf酷儿12 小时前
C++语言程序设计 (郑莉)第六章 数组、指针和字符串
开发语言·c++
禹曦a12 小时前
Java实战:Spring Boot 构建电商订单管理系统RESTful API
java·开发语言·spring boot·后端·restful
superman超哥12 小时前
精确大小迭代器(ExactSizeIterator):Rust性能优化的隐藏利器
开发语言·后端·rust·编程语言·rust性能优化·精确大小迭代器
芒克芒克12 小时前
虚拟机类加载机制
java·开发语言·jvm
陌路2012 小时前
C++28 STL容器--array
开发语言·c++