当前位置: 首页 > article >正文

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>

效果


http://www.kler.cn/a/404540.html

相关文章:

  • 构建无障碍的数字世界:深入探讨Web可访问性指南
  • Flutter中sqflite的使用案例
  • MySQL 中 InnoDB 支持的四种事务隔离级别名称,以及逐级之间的区别?
  • 关于C++地址交换的实现
  • 网络安全概论——网络安全基础
  • 【滑动窗口与双指针】【定长滑动窗口】——灵神基础篇刷题笔记1
  • redis实现计数器功能
  • 如何取消分词搜索
  • GPT1.0 和 GPT2.0 的联系与区别
  • RabbitMQ实现异步下单与退单
  • 从0开始学习机器学习--Day32--推荐系统作业
  • 统计班级中的说谎者(字节青训)
  • LLM2CLIP:使用大语言模型提升CLIP的文本处理,提高长文本理解和跨语言能力
  • 算法学习笔记(一):滑动窗口和双指针
  • RT_Thread内核源码分析(三)——线程
  • 分布式专题-Redis核心数据结构精讲
  • 《智能指针:明晰资源所有权的 C++利器》
  • 最新Kali安装详细版教程(附安装包,傻瓜式安装教程)
  • String、StringBuilder 和 StringBuffer 的区别
  • shell 接收长参数
  • ROSSERIAL与Arduino IDE交叉开发(UBUNTU环境,包含ESP32、arduino nano)
  • 深入JMeter核心引擎:揭秘JmeterEngine、StandardJmeterEngine、ClientJmeterEngine与Remote的奥秘
  • 基于Matlab的变压器仿真模型的建模方法(3):单相双绕组变压器的拉氏变换象函数模型及其仿真模型
  • DockerFile与容器构建技术
  • Redis的String类型和Java中的String类在底层数据结构上有一些异同点
  • 大数据面试题每日练习--Hadoop是什么?它由哪些核心组件组成?