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>

效果

相关推荐
Charles_go2 分钟前
C#中级45、什么是组合优于继承
开发语言·c#
二川bro16 分钟前
数据可视化进阶:Python动态图表制作实战
开发语言·python·信息可视化
xhxxx23 分钟前
prototype 是遗产,proto 是族谱:一文吃透 JS 原型链
前端·javascript
q***2511 小时前
java进阶1——JVM
java·开发语言·jvm
while(1){yan}1 小时前
线程的状态
java·开发语言·jvm
豐儀麟阁贵1 小时前
8.3 Java常见的异常类
java·开发语言
lzh200409191 小时前
【C++STL】List详解
开发语言·c++
00后程序员张1 小时前
iOS 抓不到包怎么办?从 HTTPS 解密、QUIC 排查到 TCP 数据流分析的完整解决方案
android·tcp/ip·ios·小程序·https·uni-app·iphone
q***44811 小时前
Java进阶10 IO流
java·开发语言
济宁雪人1 小时前
Java安全基础——文件系统安全
java·开发语言·安全