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>

效果

相关推荐
rainFFrain18 小时前
qt显示类控件---QProgressBar
开发语言·qt
rainFFrain18 小时前
qt输入类控件---QComboBox/QSpinBox
开发语言·qt
2501_9411118918 小时前
低延迟系统C++优化
开发语言·c++·算法
未来之窗软件服务18 小时前
自建开发工具IDE(二)文件托拽读取——东方仙盟炼气期
开发语言·前端·javascript·仙盟创梦ide·东方仙盟
Hello_WOAIAI18 小时前
4.2 python多线程编程:threading 模块深度解析
开发语言·python
GISer_Jing19 小时前
OpenCV头文件路径配置终极修复指南
javascript·opencv·webpack
2501_9411119919 小时前
C++中的装饰器模式变体
开发语言·c++·算法
树下水月19 小时前
python 连接hive2 数据库
开发语言·数据库·python
Tom4i19 小时前
Kotlin 中的 inline 和 reified 关键字
android·开发语言·kotlin
凄戚19 小时前
bash和命令
开发语言·chrome·bash