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>

效果

相关推荐
XMYX-02 分钟前
12 - Go Slice:底层原理、扩容机制与常见坑位
开发语言·golang
codeejun3 分钟前
每日一Go-50、Go微服务--配置中心
开发语言·微服务·golang
泽02025 分钟前
LLMChat ----- 通过C++语言调用大语言模型所实现的聊天系统
开发语言·c++·语言模型
蒸汽求职7 分钟前
告别静态文档:利用 Notion 搭建“交互式”简历的降维展示策略
开发语言·缓存·面试·职场和发展·金融·notion
steem_ding9 分钟前
C++ 回调函数详解
开发语言·c++·算法
会编程的土豆10 分钟前
字符串知识(LCS,LIS)区分总结归纳
开发语言·数据结构·c++·算法
五仁火烧11 分钟前
前端不传文件,也能用 multipart/form-data
前端·javascript·vue.js·node.js
FuckPatience11 分钟前
未能加载项目文件。名称不能以“<”字符(十六进制值 0x3C)开头
开发语言
五仁火烧14 分钟前
前端最常用的两种请求数据格式application/json 和 multipart/form-data 完全解析
前端·javascript·vue.js·json
书到用时方恨少!15 分钟前
Python 面向对象编程:从“过程清单”到“智能积木”的思维革命
开发语言·python·面向对象