修改uniapp内置组件checkbox的样式

news2024/11/16 6:39:40

默认情况下

<view style="margin-bottom: 20rpx;">
   <label style="display: flex;align-items: center;width: fit-content;" @click="handleCheck('cxm4s')">
       <checkbox /><text>车信盟出险+4S维保</text>
   </label>
</view>
<view style="margin-bottom: 20rpx;">
   <label style="display: flex;align-items: center;width: fit-content;" @click="handleCheck('ydgls')">
       <checkbox /><text>云端公里数查询</text>
   </label>
</view>
<view style="margin-bottom: 20rpx;">
   <label style="display: flex;align-items: center;width: fit-content;" @click="handleCheck('clztcx')">
       <checkbox /><text>车辆状态查询</text>
   </label>
</view>

修改之后

将形状修改为圆形,将背景色修改为蓝色,将对号修改为白色

  checkbox {
    transform: scale(0.67);
    border-radius: 50rpx;
  }

  checkbox .wx-checkbox-input {
    border-radius: 50%;
    border-color: #AAAAAA !important;
  }

  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #2D6EFC;
    border-color: #2D6EFC !important;
    color: #fff;
  }

将以上代码添加值css中即可实现如下效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1702109.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学习Uni-app开发小程序Day27

这一章学习了几个功能点&#xff0c;例如&#xff1a;try{}catch处理同步请求下载记录异常处理、onShareAppMessage分享好友和分享微信朋友圈、对分享页面传参进行特殊处理、共用分类列表页面实现我的下载和评分页面、使用mp-html富文本插件渲染公告详情页面 try{}catch处理同…

Java代码——@Mock注入失效,注入对象始终为null

现象&#xff1a; 最近在使用Mock对象做单元测试&#xff0c;但是发现mock的对象始终为null. 代码如下&#xff1a; package com.****.cache;import org.junit.jupiter.api.Test; import org.junit.runner.RunWith; import org.mockito.Mock; import org.mockito.junit.Mock…

基本Java语法和语义 (Reading 2)

&#xff08;1&#xff09;Java和C在变量类型命名和使用 基本数据类型 对象类型与引用类型 特殊类型 关键字和修饰符 &#xff08;2&#xff09;快照图&#xff1a; IDE调试工具: 许多IDE&#xff08;如Eclipse、IntelliJ IDEA&#xff09;提供了调试功能&#xff0c;可以…

新风向?——2DGS(2D高斯泼溅)横空出世

之前读完了3D高斯泼溅&#xff0c;收获颇丰&#xff0c;可没想到的是2D高斯泼溅也在三月份接踵而至。让我们一起解读一下&#xff01; 论文地址: 2D Gaussian Splatting for Geometrically Accurate Radiance Fields 代码地址: 2d-gaussian-splatting 一. 论文解读 Abstract …

Redis 可视化工具 RedisInsight 的保姆级安装以及使用(最新)

Redis 可视化工具 RedisInsight 的保姆级安装以及使用 一、下载 RedisInsight二、安装 RedisInsight三、使用 RedisInsight四、新建 Redis 连接 一、下载 RedisInsight 官网 https://redis.io/insight/填写基本信息之后点击 DOWNLOAD 二、安装 RedisInsight 双击安装包 点击下一…

Kubeadm Online Install Kubernetes v1.30.1

文章目录 简介架构预备条件资源规划 基础配置配置网卡配置 hosts安装常用软件配置互信安装 ansible配置 hosts关闭 swapselinux防火墙文件句柄数配置内核参数日志主机配置代理 安装 containerd方法1. 适用于rocky-8.9-x86_64-dvd1.iso方法2 适用于 rocky-8.9-x86_64-minimal.is…

ARM IHI0069F GIC architecture specification (8)

3.2中断旁路支持 CPU interface可以支持中断信号旁路&#xff0c;使得当接口发出的中断信号被禁用时&#xff0c;传统中断信号被传递到PE上的中断请求输入&#xff0c;从而绕过GIC功能。 是否支持旁路由实际设计决定。 用于确定是否使用GICv3 FIQ和IRQ输出或旁路信号的控制取决…

DOS学习-目录与文件应用操作经典案例-del

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一.前言 二.使用 三.案例 一.前言 DOS系统的del命令是一个用于删除文件的命令行工具。以下…

Android Service应用详解

1、Service概括 由于手机屏幕的限制&#xff0c;通常情况下在同一时刻仅有一个应用程序处于激活状态&#xff0c;并能够显示在手机屏幕上&#xff0c;因此&#xff0c;应用程序需要一种机制&#xff0c;在没有用户界面的情况下&#xff0c;能够长时间在后台运行&#xff0c;实…

SQLI-labs-第二十五关和第二十五a关

目录 第二十五关 1、判断注入点 2、判断数据库 3、判断表名 4、判断字段名 5、获取数据库的数据 第二十五a关 1、判断注入点 2、判断数据库 第二十五关 知识点&#xff1a;绕过and、or过滤 思路&#xff1a; 通过分析源码和页面&#xff0c;我们可以知道对and和or 进…

n7. 图

1.定义 图的每个结构之间有着某种关系。 六度空间理论等&#xff1b; 1.1引子&#xff1a; 最短路径问题 1.2什么是图 表示一种多对多的关系 线性关系表示的是一对一的关系&#xff0c;树表示的是一对多的关系。其实线性表和树其实都可以认为是图的一种特殊的情况。包含&am…

【No More Room in Hell】地狱已满服务器一键开服多人联机教程

1、购买后登录服务器 进入控制面板后会出现正在安装的界面&#xff0c;安装大约5分钟&#xff08;如长时间处于安装中请联系我们的客服人员&#xff09; 2、连接游戏 2.1、安装完成后复制开机下方的IP地址 2.2、打开Steam点击左上角的查看➡服务器 点击收藏➡右下角号 粘贴地址…

重构与优化-前言

关注公众号畅读:IT技术馆 Java代码重构是优化现有代码结构、提升代码可读性、可维护性和性能的过程,而不会改变其外在行为。这包括命名规范、消除重复代码、改进设计模式的使用、优化数据结构和算法等。下面是一些常见的Java代码重构技巧及示例: 1. 重命名(Rename) 目的…

flutter 当Scaffold 不使用appBar 时,切换主题,状态栏图标 明暗色 不自动变化,导致与底色相同

一、问题 下图中实际状态栏并没有隐藏。 为了整体效果页面采用了上下渐变拼接色&#xff0c;并且没有加appBar。 这时候会出现状态栏图标并没有根据底色 进行反差显示。 就目前这个问题&#xff0c;并没有找到什么很好的办法。其原因 就是appBar 没有设置底色。 二、解决方法…

系统与软件工程性能测试方法标准

性能测试的种类包含以下几种&#xff1a; 1.负载测试 load testing 用户评估系统与软件在预期变化负载下的性能表现&#xff0c;负载通常位于低估&#xff0c;典型&#xff0c;高峰使用的预期条件之间。 注&#xff1a;性能效率测试的一种。 建立模型 导出测试覆盖项 对于…

香橙派AIpro开发板开箱体验,国产AI计算力实现可控

一、引言 1. 嵌入式AI技术背景与发展趋势 近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;嵌入式AI技术在各个领域得到了广泛应用。作为智能设备的核心部件&#xff0c;嵌入式AI开发板为开发者提供了高效、便捷的开发环境&#xff0c;推动了智能设备的不断创新和进步…

慧算账、百望云、税友股份“走进”AI深水区

配图来自Canva可画 自金税四期正式施行以来&#xff0c;税务领域开始以数字化为核心&#xff0c;“以数治税”成为财税市场发展的主要方向&#xff0c;财税数字化市场规模不断提升。 据共研产业咨询数据&#xff0c;2022年&#xff0c;我国财税数字化市场规模为436.2亿元&…

上海市港股通交易佣金手续费最低是多少?万0.8?恒生港股通ETF今起发行!港股通的价值如何?

港股通交易佣金概述 港股通的交易佣金可能会因证券公司和投资者的不同而有所差异。 上海市港股通交易佣金最低可以万分之零点八&#xff08;0.008%&#xff09;&#xff0c;但这需要投资者与证券公司客户经理了解&#xff0c;进行沟通和申请。 一般来说&#xff0c;证券公司…

Autoware 软件功能(二)

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&#xff0c;并附带200G…

数据结构第二篇【关于java线性表(顺序表)的基本操作】

【关于java线性表&#xff08;顺序表&#xff09;的基本操作】 线性表是什么&#xff1f;&#x1f435;&#x1f412;&#x1f98d;顺序表的定义&#x1f9a7;&#x1f436;&#x1f435;创建顺序表新增元素,默认在数组最后新增在 pos 位置新增元素判定是否包含某个元素查找某个…