修改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.mzph.cn/web/16987.shtml

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

相关文章

3d火灾救援模拟仿真培训软件复用性强

消防VR安全逃生体验系统是深圳VR公司华锐视点引入了前沿的VR虚拟现实、web3d开发和多媒体交互技术&#xff0c;为用户打造了一个逼真的火灾现场应急逃生模拟演练环境。 相比传统的消防逃生模拟演练&#xff0c;消防VR安全逃生体验系统包含知识讲解和模拟实训演练&#xff0c;体…

【百度智能体】5分钟打造一款为你写情书的智能体

目录 前言一、智能体特点二、应用场景三、打造一款写情书智能体1、名称2、简介3、填写人物设定&#xff1a;4、开场白5、引导示例6、预览 最后 前言 智能体作为人工智能领域的一个重要概念&#xff0c;是指能够自主感知环境、做出决策并执行行动的系统。它具备自主性、交互性、…

单元测试(了解)

单元测试定义 针对最小功能单元&#xff08;方法&#xff09;&#xff0c;编写测试代码对其进行正确性测试 之前如何进行单元测试&#xff1f;有什么问题&#xff1f; main中编写测试代码&#xff0c;调用方法测试 问题&#xff1a; 无法自动化测试 每个方法的测试可能不是…

EPSON爱普生RTC RA8900CE/RA8000CE+松下Panasonic电池组合

RTC是一种实时时钟&#xff0c;用于记录和跟踪时间&#xff0c;具有独立供电和时钟功能。在某些应用场景中&#xff0c;为了保证RTC在断电或者其他异常情况下依然能够正常工作&#xff0c;需要备份电池方案来提供稳定的供电。本文将介绍EPSON爱普生RTC RA8900CE/RA8000CE松下Pa…

【吊打面试官系列】Java高并发篇 - AQS 支持几种同步方式 ?

大家好&#xff0c;我是锋哥。今天分享关于 【AQS 支持几种同步方式 &#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; AQS 支持几种同步方式 &#xff1f; 1、独占式 2、共享式 这样方便使用者实现不同类型的同步组件&#xff0c;独占式如 ReentrantLock&…

VUE3.0学习-模版语法

安装Node.js的过程相对直接&#xff0c;以下是详细的步骤指导&#xff0c;适用于大多数操作系统&#xff1a; ### 1. 访问Node.js官方网站 首先&#xff0c;打开浏览器&#xff0c;访问 [Node.js 官方网站](https://nodejs.org/)。 ### 2. 选择合适的版本下载 在Node.js官网上…

OpenHarmony 实战开发——ArkUI中的线程和看门狗机制

一、前言 本文主要分析ArkUI中涉及的线程和看门狗机制。 二、ArkUI中的线程 应用Ability首次创建界面的流程大致如下&#xff1a; 说明&#xff1a; • AceContainer是一个容器类&#xff0c;由前端、任务执行器、资源管理器、渲染管线、视图等聚合而成&#xff0c;提供了生…

C++ 头文件优化

C 是一种灵活的语言&#xff0c;所以需要一种积极的方法来分析和减少编译时依赖。一种常见的达到这个目的的方法是&#xff0c;将依赖从头文件里转移到源代码文件里。实现这个目的的方法叫做提前声明。 简而言之&#xff0c;这些声明告诉编译器某个函数接受和返回哪些参数&…

Python操作MySQL实战

文章导读 本文用于巩固Pymysql操作MySQL与MySQL操作的知识点&#xff0c;实现一个简易的音乐播放器&#xff0c;拟实现的功能包括&#xff1a;用户登录&#xff0c;窗口显示&#xff0c;加载本地音乐&#xff0c;加入和删除播放列表&#xff0c;播放音乐。 点击此处获取参考源…

《异常检测——从经典算法到深度学习》28 UNRAVEL ANOMALIES:基于周期与趋势分解的时间序列异常检测端到端方法

《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …

设计模式13——桥接模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 桥接模式&#xff08;Bridge&a…

冯喜运:5.27黄金短线看震荡,今日黄金原油走势分析

【黄金消息面分析】&#xff1a;黄金作为传统的避险资产&#xff0c;在经济不确定性中扮演着至关重要的角色。近期&#xff0c;国际黄金价格经历了显著的波动。从5月9日的低点2325.19美元/盎司反弹至2340美元/盎司以上&#xff0c;尽管金价曾一度触及2449.89美元/盎司的历史高点…

利用ESP32(Arduino IDE)向匿名上位机发送欧拉角

文章目录 一. 匿名上位机介绍二. 匿名协议说明1. 匿名协议官方说明文档2. 协议说明 三. 向匿名上位机发送数据(基于Arduino IDE的esp32)四. 运行效果 一. 匿名上位机介绍 匿名上位机官方介绍视频 匿名上位机官方下载 二. 匿名协议说明 1. 匿名协议官方说明文档 官方对于协…

现代 c++ 三:移动语义与右值引用

移动语义很简单&#xff0c;但它相关联的术语很复杂。本文尝试从历史的角度解释清楚这些乱七八糟的术语及其关联&#xff1a; 表达式 (expression)、类型&#xff08;type&#xff09;、值类别 (value categories)&#xff1b; 左值 (lvalue)、右值 (rvalue)、广义左值 (glval…

Flink 数据源

原理 在 Flink 中&#xff0c;数据源&#xff08;Source&#xff09;是其中一个核心组件&#xff0c;负责从各种来源读取数据供 Flink 程序处理。 Flink 的数据源类型丰富&#xff0c;涵盖了从简单测试到生产环境使用的各种场景。Kafka、Socket、文件和集合是 Flink 中最常见…

5.2 Go 参数传递

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

【傻呱呱】VirtualHere共享局域网中的USB设备(使用Pavadan老毛子固件搭建篇)

前期准备 SSH工具&#xff08;FinalShell&#xff09;老毛子固件路由器一台 搭建VirtualHere服务端 进入VirtualHere官网下载对应处理器架构的包&#xff0c;我的是RT-N14U-GPIO路由器刷的老毛子固件&#xff0c;这种一般选择最后一个或者倒数第二个包&#xff0c;这里我选择…

Transformers集成SwanLab实现AI训练可视化监控

&#x1f917;HuggingFace Transformers Hugging Face 的 Transformers 是一个非常流行的开源库&#xff0c;它提供了大量预训练的模型&#xff0c;主要用于自然语言处理&#xff08;NLP&#xff09;任务。这个库的目标是使最新的模型能够易于使用&#xff0c;并支持多种框架&…

Topogun 3 for Mac——您的专业三维模型处理利器

Topogun 3 for Mac&#xff0c;无疑是三维模型处理领域的翘楚。该软件不仅功能全面&#xff0c;而且操作简便&#xff0c;能够满足您对于三维模型处理的各种需求。 导入高模、视图操作、新建拓扑层&#xff0c;一切都在您的掌控之中。Topogun 3强大的自动拓扑功能&#xff0c;…

小猪APP分发:一站式免费应用推广的理想平台

在日益拥挤的移动应用市场中&#xff0c;对于独立开发者和新兴应用而言&#xff0c;找到一个高效且成本效益高的分发渠道至关重要。这正是小猪APP分发平台www.appzhu.cn脱颖而出的原因&#xff0c;它不仅提供了一个全面的解决方案&#xff0c;帮助开发者免费推广他们的应用程序…