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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

22年上半年下午题

第一大题题目 第一大题解答 第一小问 看加工交互和说明来得出实体的名字。如果不太确定,可以多去看几条数据流来确认答案。仔细一点,这分稳啦。 第二小问 需要对应加工结合说明得出数据存储的名称。 一般可以在后面加上表字或者加上信息表。自拟&…

腾讯云轻量应用服务器简介_轻量服务器购买指南

腾讯云轻量应用服务器性能如何?为什么便宜是不是性能不行?腾讯云百科txybk.com从轻量应用服务器的CPU型号、处理器主频、内存、公网带宽、月流量和系统盘多方面来详细测评轻量性能,轻量应用服务器性价比高,并不是性能不行&#xf…

Docker 搭建 LNMP + Wordpress

[TOC](Docker 搭建 LNMP Wordpress 一、项目介绍1.1、项目环境1.2、 服务器环境1.3、 任务需求 二、部署Nginx2.1、建立工作目录2.2、 编写 Dockerfile 脚本2.3、准备 nginx.conf 配置文件2.4、生成镜像2.5、创建自定义网络 三、部署Mysql3.1、建立工作目录3.2、编写 Dockerfi…

springboot+vue基于协同过滤算法的私人诊所管理系统的设计与实现【内含源码+文档+部署教程】

博主介绍:✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业✌ 🍅由于篇幅限制,想要获取完整文章或者源码,或者代做&am…

18亿欧元大动作,法国瞄准实现量子飞跃

Quobly 正在开发一种容错量子处理器(图片来源:网络) 2021年1月,马克龙总统宣布了法国国家量子计算计划,并将为该技术投入高达18亿欧元。 “量子战略至关重要,”马克龙在量子研究中心巴黎萨克雷大学宣布该…

SpringBoot集成Redis Cluster集群(附带Linux部署Redis Cluster高可用集群)

目录 一、前言二、集成配置2.1、POM2.2、添加配置文件application.yml2.3、编写配置文件2.4、编写启动类2.5、编写测试类测试是否连接成功 一、前言 这里会使用到spring-boot-starter-data-redis包,spring boot 2的spring-boot-starter-data-redis中,默…

小红书内容运营包含哪些,内容种草攻略

在这个社交属性,强势泛滥的年代,兼具了社交和电商两大功能的小红书,已经成为品牌方的兵家必争之地。今天来为大家分享下小红书内容运营包含哪些,内容种草攻略! 1、确定账号定位 这是做好小红书内容运营的第一步。一个有…

2018年亚太杯APMCM数学建模大赛A题老年人平衡能力的实时训练模型求解全过程文档及程序

2018年亚太杯APMCM数学建模大赛 A题 老年人平衡能力的实时训练模型 原题再现 跌倒在老年人中很常见。跌倒可能会导致老年人出现许多并发症,因为他们的康复能力通常较差,因此副作用可能会使人衰弱,从而加速身体衰竭。此外,对跌倒…

MySQL数据库#6

Python操作mysql 在使用Python连接mysql之前我们需要先下载一个第三方的模块 pymysql的模块,导入后再进行操作。 操作步骤:1. 先连接mysql host,port,charset,username password 库,等等。 import pymysql…

第16章总结

.1.1:访问构造方法 反射: 1.class类 2.获取构造方法 3.获取成员属性 4.获取成员方法 注解 1.内置注解 2.反射注解 3 创建Class对象的三种方式 1.使用getClass()方法 object str new object()…

基于springboot实现网上图书商城管理系统项目【项目源码+论文说明】

基于springboot实现网上图书商城管理系统演示 摘要 在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括网上图书商城的网络应用,在外国网上图书商城已经是很普遍的方式,不过国内的管理网站可能还处于起步…

通过requests库使用HTTP编写的爬虫程序

使用Python的requests库可以方便地编写HTTP爬虫程序。以下是一个使用requests库的示例: import requests# 发送HTTP GET请求 response requests.get("http://example.com")# 检查响应状态码 if response.status_code 200:# 获取响应内容html response.…

Plex踩坑——plex web无法找到媒体服务器

现象:之前安装过plex server,然后卸载了。再次重装后,plex web无法找到媒体服务器。 原因:卸载plex server时需要手动将plex的注册表删除:HKEY_CURRENT_USER\Software\Plex, Inc. 原文链接Uninstall Plex Media Serve…

如何在忘记手机密码或图案时重置 Android 手机?

忘记手机密码或图案是 Android 用户一生中不得不面对的最令人沮丧的事情之一。恢复 Android 设备的唯一方法是在 Android 设备上恢复出厂设置。但许多用户不使用此方法,因为此过程会擦除您设备上可用的所有个人数据。 但是,有一种方法可以在不丢失任何数…

2023年Q3企业邮箱安全性报告:境内钓鱼邮件超过境外攻击

10月25日,Coremail邮件安全联合北京中睿天下信息技术有限公司发布《2023年第三季度企业邮箱安全性研究报告》。2023年第三季度企业邮箱安全呈现出何种态势?作为邮箱管理员,我们又该如何做好防护? 以下为精华版阅读,如需…

抢先体验!星河社区ERNIE Bot SDK现已支持文心大模型4.0

在2023百度世界大会上,百度创始人、董事长兼首席执行官李彦宏正式官宣发布文心大模型4.0! 文心大模型 4.0,相比3.5版本,理解、生成、逻辑、记忆四大能力都有显著提升。其中理解和生成能力的提升幅度相近,而逻辑和记忆…

python爬虫入门(四)爬取猫眼电影排行(使用requests库和正则表达式)

本例中,利用 requests 库和正则表达式来抓取猫眼电影 TOP100 的相关内容。 1.目标 提取出猫眼电影 TOP100 的电影名称、时间、评分、图片等信息,提取的站点 URL 为 http://maoyan.com/board/4,提取的结果会以文件形式保存下来。 2.抓取分析…

第27届亚洲国际动力传动与控制技术展览会盛大开幕,意大利国家展团闪耀回归

2023年10月24日,第27届亚洲国际动力传动与控制技术展览会(PTC ASIA)在上海新国际博览中心正式拉开帷幕。作为亚太地区动力传动行业的风向标,PTC ASIA致力于为来自世界各地的参展企业提供专业的采供、技术信息交互平台,…

账号运营的底层逻辑---获客思维

什么是运营? 运营是做什么的? 什么是内容运营? 什么是活动运营? 一篇带你搞清楚所有的底层逻辑!

搜维尔科技:【应用】配备MTi-3的轻便型ROV,在水下进行地理标记视觉检测

部署潜水员进行水下摄像,不仅难度高而且费用昂贵,需要受过潜水和摄像两方面培训的专业人员来进行。但有些水下作业任务例如拍摄海底管道内部的照片,由于人员无法进入或危险度高的原因,无法由潜水员完成。 如今,俄罗…