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

news2024/9/20 8:05:08

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.coloradmin.cn/o/1126172.html

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

相关文章

Redis3.2.12版本服务器迁移

1.新机器更新yum源 yum -y update 2.新机器安装redis数据库 yum install redis 3.新机器下载fedora的epel仓库 systemctl enable redis 4.将旧机器上的/etc/redis.conf拷贝到新机器的/config目录下 scp -r -P22 redis.config root162.32.196.57:/config/redis.config 5.新机器启…

CentOS 编译安装TinyXml2

安装 TinyXml2 Git 源码下载地址:https://github.com/leethomason/tinyxml2 步骤1:首先,你需要下载tinyxml2的源代码。你可以从Github或者源代码官方网站下载。并上传至/usr/local/source_code/ 步骤2:下载完成后,需要将源代码解…

LrC 13 ACR 16:点颜色

Adobe Lightroom Classic 13( 2023 年 10 月版)及 Adobe Camera Raw 16 新增的点颜色 Point Color功能可以方便、精准地调整图像上的颜色。 LrC:修改照片/混色器/点颜色 Develop/Color Mixer/Point Color ACR:编辑/混色器/点颜色 …

希捷推出Exos系列24TB硬盘:配备增强型缓存 性能提高三倍

希捷推出了全新的Exos 24TB硬盘。其基于传统的CMR构建,为3.5英寸规格,转速为7200 RPM。 同时,Exos系列24TB硬盘拥有10片磁盘,每片磁盘的容量为2.4TB,是希捷存储密度最高的硬盘,适用于超大规模企业和数据中心…

最新Jn建站系统2.0 已集成各类源码 【附视频安装教程】

附视频安装教程|已集成各类源码 目前已集成的网站: 1.发卡网(最新) 2.代刷网(无需授权) 3. 博客网(自带模板) 4.易支付(稳定版) 5.个人导航网(简洁) 6.代理查询网 7.留言网 8.匿名网 9.表白墙(最新) 10.抽奖网 11.源码站 12.z-blog博客程序 13.织梦CM…

Ubuntu Linux下如何搭建并安装EDK2

本教程全程手动下载安装: 1、官网下载EDK2安装包(这里下载当前最新版) ---- 2023.10.23 网址:https://sourceforge.net/projects/edk2/files/UDK2015_Releases/UDK2015/UDK2015.Complete.MyWorkSpace.zip 2、解压 unzip UDK2015.Complete.MyWorkSpace…

Android 实现资源国际化(多语言)

目录 一、介绍 二、字符串资源 三、图片资源 四、日期和时间格式 五、其他 六、应用内切换语言 七、资源文件命名规则 一、介绍 Android国际化(多语言)是一种开发技术,旨在使Android应用程序能够在「不同语言和文化环境」下运行,并为用户提供本地…

vue3中使用vue3-pdf-app和使用浏览器内置的PDF插件浏览器PDF文件

文章目录 先准备一个PDF使用浏览器内置的PDF插件预览PDF在HTML中使用浏览器插件预览PDFVscode使用插件发布服务后直接通过URL地址访问PDF可使用的浏览器 在vue3项目中预览PDF文件vue3项目也是可以通过URL地址访问文件的vue3中使用浏览器内置的PDF插件预览PDF代码如下所示&#…

单窗口单IP适合炉石传说游戏么?

游戏道具制作在炉石传说中是一个很有挑战的任务,但与此同时,它也是一个充满机遇的领域。在这篇文章中,我们将向您展示如何在炉石传说游戏中使用动态包机、多窗口IP工具和动态IP进行游戏道具制作。 作者与主题的关系:作为一名热爱炉…

【分布式】大模型分布式训练入门与实践 - 04

大模型分布式训练 数据并行-Distributed Data Parallel1.1 背景1.2 PyTorch DDP1) DDP训练流程2)DistributedSampler3)DataLoader: Parallelizing data loading4)Data-parallel(DP)5)DDP原理解析…

nodejs+vue 视频网站的设计与实现

该设计划分为七大模块,包括用户的系统管理、其他管理和视频管理三部分, 和管理管理员的视频、其他管理、系统管理和用户管理四部分。目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关…

【虚幻引擎UE】UE4/UE5 基于2D屏幕坐标获取场景3D坐标 射线检测(蓝图/C++)

UE4/UE5 基于2D屏幕坐标获取场景3D坐标 一、射线检测1)定义1)射线与3D场景中的物体交互的流程2)射线检测蓝图函数3)蓝图实现根据鼠标点击位置获取场景中的坐标值4)根据相机中心点获取场景中的坐标值5)射线检…

迅为RK3588开发板Android12双摄同时显示

要支持双摄同时显示需对源码做如下修改,修改文件 hardware/rockchip/camera/Camera3HALModule.cpp 注释掉下面函数中的部分代码即可。 测试 双摄同时显示需要双摄 app,在网盘资料下载测试 APK,然后使用 adb 安装测试 APK, 启动…

hive窗口函数记录

记录工作中和学习中的窗口函数,方便以后使用,本记持续更新和完善,版本:231019 文章目录 1.什么是窗口函数2.窗口函数的表达式3.窗口函数的类型1) 排名函数2) 聚合函数3) 跨行取值函数 4.[frame…

中英文双语言海外微盘交易源码 微盘交易源码 虚拟币微盘交易系统源码 支持产品数据

Rockefeller微交易源码/双语言海外微盘完整源码/带单控 测试环境:宝塔、Linux、PHP7.3、MySQL5.6 根目录 public,伪静态 larvael5,默认文档:index.html修改为第一个,不然会报404 k线对接的是蜜蜂查:http…

平衡二叉树(AVL)【java实现+图解】

目录 一、平衡二叉树(AVL) 二、平衡二叉树的四种旋转 1.右旋转 2.左旋转 3. 左右旋转 4. 右左旋转 三、基于二叉搜索树之平衡二叉树的代码实现 1.具体方法思路 2.java代码实现 一、平衡二叉树(AVL) 一种自平衡二叉搜索树,它是在每个节点上增加一个平衡因子…

Day 1 Vue 页面框架

现在前端框架越来越像后端了,特别是TypeScript这样的语言出现后,开发前端的体验跟后端渐渐接近了。当然,作为一个后端,直接上手前端,还是有很多坑要填的。 本次开发,前端页面框架直接选择Vue。原因很简单&…

HTML中文本框\单选框\按钮\多选框

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <h1>登录注册</h1> <form action"第一个网页.html" method"post&quo…

字节码进阶之java反射的底层实现原理

文章目录 1. 前言1. 类加载机制2. 字节码操作 2. 反射方法源码分析反射的inflation机制 3. 为什么反射性能差4. 反射的限制与安全性考虑1. **性能开销**2. **安全限制**3. **破坏抽象**4. **版本兼容性问题** 参考文档 java 反射的底层实现原理 1. 前言 Java反射的底层实现原理…

Windows下Eclipse C/C++开发环境配置教程

1.下载安装Eclipse 官网下载eclipse-installer&#xff08;eclipse下载器&#xff09;&#xff0c;或者官方下载对应版本zip。 本文示例&#xff1a; Eclipse IDE for C/C Developers Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse ID…