uniapp 单选框以及多选框样式更改

radio以及checkbox默认样式不符合自身需求时,根据自身需求更改样式,以下是自身的示例:

单选:

多选:

由于uniapp自身包含了一套默认的样式,所以如果不想全局更改只想在某个单据页面使用的话,就要考虑CSS优先级的问题,以下为具体样式,给大家做一个参考:(我这边可能会麻烦一点,大家按照自身需求删减哈)

单选框CSS:

/* radio 边框颜色 */
/deep/ uni-radio .uni-radio-input{width: 30rpx;height: 30rpx;border:2rpx solid rgba(166, 175, 255, 0.5)!important;transform: rotateZ(360deg);  //防止IOS出现一侧边框缺失的问题background-color: rgba(255, 255, 255, 0)!important;margin-right:0rpx!important;  //uniapp 默认右侧会有一定的margin,大家根据自身需求去除
}/* radio 选中后的边框颜色 */
/deep/ uni-radio .uni-radio-input-checked {border:2rpx solid #CACFFF!important;transform: rotateZ(360deg);background-color: #556FFE!important;display:flex;align-items: center;justify-content: center;
}/* radio 选中后的图标样式*/
/deep/  uni-radio .uni-radio-input.uni-radio-input-checked::before{display: block;content: ""!important;width:20rpx!important;height:20rpx!important;text-align:center;background:#fff!important;border-radius:20rpx!important;}

多选框CSS:

/deep/ uni-checkbox .uni-checkbox-input{width: 30rpx;height: 30rpx;border-radius: 8rpx;border: 2rpx solid #5262E8;transform: rotateZ(360deg);background-color: rgba(255, 255, 255, 0)!important;pointer-events: none;
}/deep/ uni-checkbox .uni-checkbox-input-checked{border:2rpx solid #CACFFF!important;transform: rotateZ(360deg);background-color: #556FFE!important;
}/deep/ uni-checkbox .uni-checkbox-input-checked::before{font-size: 12px!important;font-weight:bold;color:#fff;
}

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

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

相关文章

Mysql,SqlServer,Oracle获取库名 表名 列名

先看下需求背景: 获取某个数据源连接下所有库名,库下所有表名,表中所有字段 1.MySql 先说MySql吧,最简单 1.1获得所有数据库库名 这是一个mysql和sqlserver公用的方法,这里url不用担心数据库问题,他其实…

程序的编译和链接

目录 翻译环境 linux下的测试 ​编辑 预定义符号 执行环境 #define定义宏 #和## # ## 宏参数的副作用 宏和函数对比 优点 缺点 #undef 条件编译 头文件包含 在标准c的任何实现中,存在两种环境——翻译环境和执行环境 翻译环境 翻译环境生成目标文件…

2023年中国磷酸一铵行业产能、产量及发展趋势分析:农业需求稳定增长[图]

磷酸一铵是一种重要的氮磷复合肥料,在农业生产中广泛应用。亚洲地区尤其是中国、印度等国家是磷酸一铵的主要消费市场。近年来,中国磷酸一铵产能呈现下降趋势,2022年开始恢复增长。2022年中国磷酸一铵产能达1945万吨,同比增长5.4%…

linux工具篇

文章目录 linux工具篇1. linux 软件包管理器-yum1.1 什么是软件包1.2 yum的使用1.3 yum源 2. linux编辑器-vim2.1 vim概念2.2 vim各个模式切换2.3 vim正常模式命令汇总2.4 vim底行模式各命令汇总2.5 vim的简单配置 3. Linux编译器-gcc/g使用3.1 复习程序编译过程(1) 预处理(2) …

二进制安装k8s

192.168.11.12 master01 192.168.11.12 y4 node01 192.168.11.14 y5 node02 192.168.11.15 对环境进行初始化,主机192.168.11.12、主机y4、主机y5,三台主机都要做以下操作,唯一不同的就是修改主…

04.Finetune vs. Prompt

目录 语言模型回顾大模型的两种路线专才通才二者的比较 专才养成记通才养成记Instruction LearningIn-context Learning 自动Prompt 部分截图来自原课程视频《2023李宏毅最新生成式AI教程》,B站自行搜索 语言模型回顾 GPT:文字接龙 How are __. Bert&a…

如何为3D模型设置自发光材质?

1、自发光贴图的原理 自发光贴图是一种纹理贴图,用于模拟物体自发光的效果。其原理基于光的发射和反射过程。 在真实世界中,物体自发光通常是由于其本身具有能够产生光的属性,如荧光物质、发光材料或光源本身。为了在计算机图形中模拟这种效…

应急响应-网站入侵篡改指南_Webshell内存马查杀_漏洞排查_时间分析

1. 前言 一般安服在做项目的时候,经常会遇到需要做应急响应的工作,所谓应急响应就是当网站出现异常的时候,根据相关的问题对其进行溯源分析,发现问题,解决问题。 2. 网络安全异常特征 这里大概汇总一下网络安全异常的…

RustDay06------Exercise[91-100]

91.将指针还原成指定类型 因为指针不知道里面具体有什么,所以一般约定打上unsafe 申明开发者自己对该部分可用性负责,且在调试的时候也能起强调作用 // tests6.rs // // In this example we take a shallow dive into the Rust standard librarys // unsafe functions. Fix …

c语言从入门到实战——分支和循环

分支和循环 前言1. if语句1.1 if1.2 else1.3 分支中包含多条语句1.4 嵌套if1.5 悬空else问题 2. 关系操作符3. 条件操作符4. 逻辑操作符:&& , || , !4.1 逻辑取反运算符4.2 与运算符4.3 或运算符4.4 练习:闰年的判断4.5 短路 5. swit…

鸡尾酒学习——长岛冰茶

长岛冰茶 1、材料:冰块(或者雪莲)、白朗姆、伏特加、龙舌兰、金酒、柠檬、君度或者白兰地、可乐; 2、口感:酸甜苦口味,酒的苦涩较为明显(怀疑是自己放了过多的柠檬汁导致苦涩感明显&#xff09…

Sui提供dApp Kit 助力快速构建React Apps和dApps

近日,Mysten Labs推出了dApp Kit,这是一个全新的解决方案,可用于在Sui上开发React应用程序和去中心化应用程序(dApps)。mysten/dapp-kit是专门为React定制的全新SDK,旨在简化诸如连接钱包、签署交易和从RPC…

若依微服务上传图片文件代理配置

在使用若依微服务文件上传时候,文件上传成功会上传到D:/ruoyi/uploadPath目录下。默认使用9300端口进行访问图片文件,现在我想把它代理到80端口应该怎么做呢? 配置前:http://localhost:9300/statics/2023/09/24/test.jpg 配置后:http://localhost/statics/2023/09/24/test…

JWT的登录认证与自校验原理分析

目录 一、JWT的概述 1.什么是JWT? 2.JWT的用户认证 3.JWT解决了什么问题? 4.关于JWT中的签名如何理解? 5.JWT的优势 二、JWT的结构 1.令牌的组成: 2.JWT的工具类 3.JWT所需的依赖 4.JWT登录生成Token的原理 三、JWT的自…

浅谈智能制造

智能制造 如今,同一版本同一型号的手机,几乎是一模一样的。当我们说去选购商品,其实是在有限的型号中选择我们需要的那一款。可是,人的需求千变万化,为什么偏偏要归结到几个固定的型号上去呢?每个人不应该…

图片放大镜效果

安装&#xff1a; vueuse 插件 npm i vueuse/core 搜索&#xff1a; useMouseInElement 方法 <template><div ref"target"><h1>Hello world</h1></div> </template><script> import { ref } from vue import { useM…

【Python 算法】信号处理通过陷波滤波器准确去除工频干扰

对于一个信号来说通常汇入工频噪声往往是因为交流电产生的电泳&#xff0c;影响了我们信号采集导致信号上存在工频干扰。 那么matlab去除工频干扰可以通过陷波滤波器实现。 通常使用scipy.signal实现信号的处理。 Scipy的信号处理模块&#xff08;scipy.signal&#xff09;来创…

day02:DML DQL DCL

目录 一:DML 二:DCL 三:DCL 一:DML 1:概念:数据操作原因&#xff0c;对数据进行增删改。 2:三个操作 (1):增加:insert id name age gender 1 令狐冲 23 男 2(添加的数据)风清扬25男 1--->给指定字段添加数据:insert into 表名(字段1&#xff0c;字段2--)values…

攻防世界-web-FlatScience

1. 题目描述 打开链接&#xff0c;看到如下界面 界面上的链接都点击下&#xff0c;发现都是一些英文论文 这些暂时是我们从界面上能发现的全部信息了 2. 思路分析 && 解题过程 2.1 先将网站使用nikto命令扫描一下 我们发现除了显式的界面外&#xff0c;还有两个隐藏…

Mysql数据库 4.SQL语言 DQL数据操纵语言 查询

DQL数据查询语言 从数据表中提取满足特定条件的记录 1.单表查询 2.多表查询 查询基础语法 select 关键字后指定要查询到的记录的哪些列 语法&#xff1a;select 列名&#xff08;字段名&#xff09;/某几列/全部列 from 表名 [具体条件]&#xff1b; select colnumName…