修改uniapp内置组件checkbox的样式

默认情况下

<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.rhkb.cn/news/333098.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STC8增强型单片机开发——C51版本Keil环境搭建

一、目标 了解C51版本Keil开发环境的概念和用途掌握C51版本Keil环境的安装和配置方法熟悉C51版本Keil开发环境的使用 二、准备工作 Windows 操作系统Keil C51 安装包&#xff08;可以从Keil官网下载&#xff09;一款8051单片机开发板 三、搭建流程 环境搭建的基本流程&#xf…

VMware ESXi 兼容性查询

官网兼容性查询地址&#xff1a;https://www.vmware.com/resources/compatibility/search.php

衍生品赛道的 UniSwap:SynFutures 或将成为行业领军者

经过一个周期的发展&#xff0c;DeFi 已经成为基于区块链构建的最成功的去中心化应用&#xff0c;并彻底改变了加密市场的格局。加密货币交易开始逐步从链下转移到链上&#xff0c;并从最初简单的 Swap 到涵盖借贷、Staking、衍生品交易等广泛的生态系统。 在 DeFi 领域&#x…

【软件设计师】——9.UML建模

目录 9.1概述 9.2 结构图 9.2.1 对象图 9.2.2 类图 9.2.3 构件/组件图 9.2.3 部署图 9.2.4 制品图 9.2.5 组合结构图 9.3 行为图 9.3.1 用例图 9.3.2 协作图 9.3.3 顺序/序列/时序图 9.3.4 活动图 9.3.5 状态图 9.3.6 通信图 9.4 交互图 9.1概述 基本概念 UML统…

kali基本扫描工具(自带)

免责声明:本文仅做技术交流与学习...请勿非法破坏... 详细用法: 命令 -h/百度/翻译 fping 用法 hostlist 文件里面为ip fping -a -q -f hostlist -a 只看存活的 fping -g 202.100.1.1 202.100.1.255 -a -q > Ahost 输出到Ahost文件上 nping nping -c 1 201.100.2.155-244 …

下载Junit4的jar包和在eclipse下完成配置

​ 题外话&#xff1a; 本篇是新人小白搜索帖子&#xff0c;摸索学习如何下载和导入Junit的jar包并在eclipse下完成配置与使用&#xff0c;是自用的傻瓜式教程&#xff0c;文中如果出现错误或者值得改进的地方&#xff0c;非常欢迎各位提出&#xff01;&#xff01;&#xff01…

C# --- 浮点数类型 float, double, decimal

C# --- 浮点数类型 float, double, decimal float, double, decimaldecimal float, double, decimal decimal double 和 float 的采用base 2, 不能精确的表示浮点数, 进行加减乘除的操作的时候会出现精度丢失的问题decimal 采用base 10&#xff0c;可以精确的表示浮点数&#x…

判断dom元素是否滚动到底、是否在可视区域

概览 我们日常开发中&#xff0c;在面对懒加载、虚拟列表需求时&#xff0c;经常需要判断dom元素是否滚动到底、是否在可视区域。但是由于涉及的属性太多了&#xff0c;比如scrollTop、clientHeight、scrollHeight、getBoundingClientRect()等属性&#xff0c;现根据这两个场景…

【实战JVM】-基础篇-02-类的声明周期-加载器

【实战JVM】-基础篇-02-类的声明周期-加载器 3 类的生命周期3.1 生命周期的概述3.2 加载阶段3.2.1 查看内存中的对象 3.3 连接阶段3.3.1 验证阶段3.3.1.1 验证是否符合jvm规范3.3.1.2 元信息验证3.3.1.3 验证语义3.3.1.4 符号引用验证 3.3.2 准备阶段3.3.3 解析阶段 3.4 初始化…

利用Anaconda+Pycharm配置PyTorch完整过程

说在前面&#xff1a;这篇是记录贴&#xff0c;因为被配置环境折磨了大半天&#xff0c;所以记录下来下次方便配置&#xff0c;有点像流水账&#xff0c;有不懂的地方可以评论问。 参考文章&#xff1a; https://blog.csdn.net/m0_48609250/article/details/129402319 环境&…

【数据结构】链式二叉树(超详细)

文章目录 前言二叉树的链式结构二叉树的遍历方式二叉树的深度优先遍历前序遍历(先根遍历)中序遍历(中根遍历)后序遍历(后根遍历) 二叉树的广度优先遍历层序遍历 二叉树链式结构接口实现二叉树结点个数二叉树叶子结点个数二叉树的深度&#xff08;高度&#xff09;二叉树第k层结…

el-switch自动触发更新事件

比如有这样一个列表&#xff0c;允许修改单条数据的状态。希望在更改el-switch状态时能够有个弹框做二次确认&#xff0c;没问题&#xff0c;el-switch已经帮我们想到了&#xff0c;所以它提供了beforeChange&#xff0c;根据beforeChange的结果来决定是否修改状态。一般确认修…

Java入门-java的集合框架

集合概念 集合&#xff0c;有时也称作容器(Container), 是对象的持有者&#xff0c;它们可以有助于高效访问的方式存储的组织对象。以生活中的案例为例&#xff1a; 集合就像装衣服的柜子&#xff0c;衣服就是集合中的元素。 集合框架图 Collection中每次操作的都是一个对象&a…

android-mvp模式

mvvm可以理解成使用databing的mvp模式&#xff0c;modleview 通过接口让view和Presenter层解耦 从图中就可以看出&#xff0c;最明显的差别就是view层和model层不再相互可知&#xff0c;完全的解耦&#xff0c;取而代之的presenter层充当了桥梁的作用&#xff0c;用于操作view…

56. UE5 RPG 给敌人添加AI实现跟随玩家

在这一篇里&#xff0c;我们要实现一下敌人的AI&#xff0c;敌人也需要一系列的行为&#xff0c;比如朝向英雄攻击&#xff0c;移动&#xff0c;在满足条件时施放技能。这些敌人的行为可以通过使用UE的内置的AI系统去实现。 在UE里&#xff0c;只要是基于Character类创建的蓝图…

java欢迪迈手机商城设计与实现源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的欢迪迈手机商城设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 欢迪迈手机商城…

D - Permutation Subsequence(AtCoder Beginner Contest 352)

题目链接: D - Permutation Subsequence (atcoder.jp) 题目大意&#xff1a; 分析&#xff1a; 相对于是记录一下每个数的位置 然后再长度为k的区间进行移动 然后看最大的pos和最小的pos的最小值是多少 有点类似于滑动窗口 用到了java里面的 TreeSet和Map TreeSet存的是数…

【C语言】结构体内存对齐:热门面试话题

&#x1f525;引言 书接上文&#xff0c;我们了解关于结构体的基本知识&#xff0c;这篇将深入剖析结构体中一个重要的知识点:内存对齐 关于内存对齐是属于热门面试话题&#xff0c;对此单独放在一篇来分享 &#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记…

Docker Portainer使用

Portainer是什么 Docker Portainer是一个轻量级的 Web UI 管理界面,可以用来管理Docker环境。它提供了一个直观的控制台,用户可以通过它来管理Docker主机、容器、网络、卷等Docker资源。 Portainer的主要功能和特点包括: 容器管理:可以查看、启动、停止、删除容器,以及查看容器…

计算机毕业设计 | springboot+vue房屋租赁管理系统(附源码)

1&#xff0c;绪论 1.1 课题来源 随着社会的不断发展以及大家生活水平的提高&#xff0c;越来越多的年轻人选择在大城市发展。在大城市发展就意味着要在外面有一处安身的地方。在租房的过程中&#xff0c;大家也面临着各种各样的问题&#xff0c;比如需要费时费力去现场看房&…