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.hqwc.cn/news/150802.html

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

相关文章

Python 框架学习 Django篇 (六) 数据表关联、ORM关联

在后端服务器开发中,特别是前后端分离的架构中数据库是非常重要的,后端主要就是负责管理数据,而我们经常使用的mysql、oracle 都是关系型数据库,什么是关系型数据库?就是建立在关系模型基础上的数据库,而最…

p5.js画布操作实战:创建,绑定指定元素,动态调整大小,隐藏滚动条,删除画布

文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。让画布绑定指定元素。重置画布大小。删除画布。 学习本文前你需要具备一点 p5.js 的知识,想了解的请查看 《p…

Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (一)

最近看了一个同事的几个视频。他总结的很好。在使用 LangChain 时,根据 LangChain 的官方文档 https://integrations.langchain.com/vectorstores,目前有三种方法可以进行使用:ElasticVectorSearch,ElasticsearchStore 及 Elastic…

洗衣行业在线预约小程序+前后端完整搭建教程

大家好哇,好久不见!今天源码师父来给大家推荐一款洗衣行业在线预约的小程序,带有前后端的完整搭建教程。 目前,人们对生活品质的追求不断提高,但生活节奏却也不断加快。对品质的追求遇到了忙碌的生活节奏,…

计算机网络【CN】子网划分与子网掩码

一个子网定义(X.X.X.X/n) 子网掩码为 n 个 1,32-n 个 0包含的 IP 地址数:232−n 主机号全 0 表示本网段主机号全 1 表示网段的广播地址可分配的 IP 地址数 :232−𝑛−2 子网划分原则 满足子网定义子网𝐴1…𝐴&#x…

Android Glide限定onlyRetrieveFromCache取内存缓存submit超时阻塞方式,Kotlin

Android Glide限定onlyRetrieveFromCache取内存缓存submit超时阻塞方式,Kotlin import android.os.Bundle import android.util.Log import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import androidx.lifecycle.lifecycleScope import com.b…

宏电5G RedCap工业智能网关获首个中国移动5G物联网开放实验室5G及轻量化产品能力认证

10月21日,2023世界物联网博览会——中国移动物联网开发者大会暨物联网产业论坛在无锡圆满举行。宏电股份参与中国移动5G物联网开放实验室5G及轻量化产品能力认证成果授牌仪式,并获得认证证书。 此次认证主要对产品功能、产品性能、RedCap网络兼容性进行测…

Echarts 实现 设备运行状态图(甘特图) 工业大数据展示

let option{tooltip: {formatter: function (params) {let startTime new Date(params.value[1])let endTime new Date(params.value[2]);//北京时间/时间戳转成日常时间function convert(date){var y date.getFullYear();var m date.getMonth() 1;m m < 10 ? "0…

Ocelot简易教程目录

Ocelot简易教程目录 这里写目录标题 Ocelot简易教程目录 Ocelot简易教程&#xff08;一&#xff09;之Ocelot是什么Ocelot简易教程&#xff08;二&#xff09;之快速开始1Ocelot简易教程&#xff08;二&#xff09;之快速开始2Ocelot简易教程&#xff08;三&#xff09;之主要特…

jvm摘要

第 2 章 Java 内存区域与内存溢出异常 2.2 运行时数据区域 程序计数器-线程私有:是一块较小的内存空间&#xff0c;它可以看作是当前线程所执行的字节码的行号指示器。 程序计数器是唯一一个没有规定任何OutOfMemoryError 情况的区域。 Java 虚拟机栈-线程私有:用于执行Java …

2016年亚太杯APMCM数学建模大赛A题基于光学信息数据的温度及关键元素含量预测求解全过程文档及程序

2016年亚太杯APMCM数学建模大赛 A题 基于光学信息数据的温度及关键元素含量预测 原题再现 光含有能量&#xff0c;在一定条件下可以转化为热。燃烧是一种常见的现象&#xff0c;既能发光又能发热。光和热通常是同时存在的&#xff0c;一般来说&#xff0c;光强度越高&#xf…

36基于matlab的对分解层数和惩罚因子进行优化

基于matlab的对分解层数和惩罚因子进行优化。蚁狮优化算法优化VMD,算术优化算法优化VMD&#xff0c;遗传优化算法优化VMD&#xff0c;灰狼优化算法优化VMD&#xff0c;海洋捕食者优化算法优化VMD&#xff0c;粒子群优化VMD&#xff0c;麻雀优化算法优化VMD&#xff0c;鲸鱼优化…