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>

效果

相关推荐
We....7 分钟前
Java分布式编程:RMI机制
java·开发语言·分布式
给月亮点灯|10 分钟前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
€81115 分钟前
Java入门级教程17——利用Java SPI机制制作验证码、利用Java RMI机制实现分布式登录验证系统
java·开发语言·java spi机制·远程传输数据
顽强d石头17 分钟前
v-model与.aync的区别
前端·javascript·vue.js
2301_8153577021 分钟前
parameterType和@Param注解的区别
java·开发语言·数据库
tyatyatya27 分钟前
MATLAB中进行视觉检测入门教程
开发语言·matlab·视觉检测
xvmingjiang44 分钟前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭44 分钟前
ES5 和 ES6 类的实现
前端·javascript·es6
2401_845417451 小时前
set和map
java·开发语言
2301_821046521 小时前
Python的深度学习
开发语言·javascript·ecmascript