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>

效果

相关推荐
老前端的功夫26 分钟前
Web应用的永生之术:PWA落地与实践深度指南
java·开发语言·前端·javascript·css·node.js
LilySesy1 小时前
ABAP+WHERE字段长度不一致报错解决
java·前端·javascript·bug·sap·abap·alv
ᐇ9591 小时前
Java HashMap深度解析:数据结构、原理与实战指南
java·开发语言·数据结构
QT 小鲜肉2 小时前
【个人成长笔记】在 Linux 系统下撰写老化测试脚本以实现自动压测效果(亲测有效)
linux·开发语言·笔记·单片机·压力测试
Wang's Blog2 小时前
前端FAQ: Vue 3 与 Vue 2 相⽐有哪些重要的改进?
前端·javascript·vue.js
程序员龙一2 小时前
C++之static_cast关键字
开发语言·c++·static_cast
yue0082 小时前
C# 分部类读取学生信息
开发语言·c#
奶茶树2 小时前
【C++/STL】map和multimap的使用
开发语言·c++·stl
聪明努力的积极向上2 小时前
【C#】事件简单解析
开发语言·c#
用户47949283569152 小时前
JavaScript 的 NaN !== NaN 之谜:从 CPU 指令到 IEEE 754 标准的完整解密
前端·javascript