colorui radio 样式_uni-app 修改 radio/checkbox/switch 组件样式

2023-11-12

我们在用 uni-app 开发前端页面时,往往需要修改一些组件的默认样式,特别是颜色。那么如何修改 radio/checkbox/switch(单选框/复选框/开关)的样式呢?可以通过覆盖样式的方式实现。

下面以单选框 radio 为例(基于 colorui)说明。

在 App.vue 文件的 style 中增加以下样式覆盖 colorui 的样式:/* 重设 radio、checkbox 大小和位置,否则在不同分辨率小会变形 */

/* #ifndef MP-ALIPAY */

radio::before,

checkbox::before {

margin-top: -8rpx;

right: 8rpx;

font-size: 36rpx;

line-height: 16rpx;

}

radio .wx-radio-input,

checkbox .wx-checkbox-input,

radio .uni-radio-input,

checkbox .uni-checkbox-input {

margin: 0;

width: 48rpx;

height: 48rpx;

}

/* #endif */

/* 覆盖样式修改颜色 */

switch.theme[checked] .wx-switch-input.wx-switch-input-checked,

checkbox.theme[checked] .wx-checkbox-input,

radio.theme[checked] .wx-radio-input,

switch.theme.checked .uni-

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

colorui radio 样式_uni-app 修改 radio/checkbox/switch 组件样式 的相关文章

随机推荐

  • 计算机网络基础知识整理

    计算机网络 用通信设备和线路将处在不同地理位置 操作相对独立的多台计算机连接起来 并配置相应的系统和应用软件 在原本各自独立的计算机之间实现软硬件资源共享和信息传递等功能的系统 计算机网络的功能 数据通信 2 资源共享 3 增加可靠性 4
  • 【技术解析笔记】DDPM解析

    本文为youtube上一个ddpm解析视频的摘录笔记 youtube原视频链接 https www youtube com watch v W O7AZNzbzQ 基本介绍 DDPM指的是Denoising diffusion probal
  • hive - 面试题 - 最近一次购物在一年前(近一年内无购物)

    要求 有表 用户id 订单id 下单日期 该用户符合365天内无交易且当日有交易的数据打标签 如果当天有多条记录 同样打标签 思路 当前订单时间 最近一次的下单时间 gt 365 即最近365天内无订单记录 中间有个问题 一天内多次下单 只
  • 【GCC-RT-Thread】gcc交叉编译 STM32 - RT-Thread

    GCC RT Thread gcc交叉编译 STM32 RT Thread 最近在公司实习 公司想将原来在Windows keil上开发的项目移到Linux 并上RTT操作系统 最近就被安排做了这件事 首先 下载 RT Thread Nan
  • 学习记录396@git clone 只克隆到.git文件

    github上的仓库 但是使用乌龟克隆时只克隆到 git文件和README文件 原因是在我的仓库中 没有选择分支 默认是main分支 但我的项目在master分支 因此加上分支选项处在clone即可 如果是使用命令行clone 需要使用如下
  • python基础 -15- 深浅拷贝

    浅拷贝 data name alex age 18 scores 语文 130 数学 60 英语 98 浅拷贝 data copy data copy 再看一下各自的内存地址 可以发现指向的内存地址不一样 print data的内存地址 i
  • 白盒测试题(13-16道题目+详细代码)

    白盒测试 题 13 根据下列流程图编写程序实现相应分析处理并显示结果 并设计最少的测试数据进行判定覆盖测试 输入数据打印出 输入 x 值 输入 y 值 输出文字 a 和 a 的值 输出文字 b 和 b 的值 其中变量 x y 均须为整型 i
  • 红队靶场内网渗透(从DMZ主机渗透到域内机器)

    目录 一 红队靶场内网渗透 1 靶机工具下载 2 本实验网络拓扑图 3 内网渗透攻击流程 二 环境搭建 1 DMZ区win7 2 内网办公区 3 域控主机 三 开始攻击 1 DMZ区win7渗透 1 1信息收集 1 2收集到的信息 1 3远
  • 安卓手机使用Termux实现gitee云端代码本地化修改

    Termux是什么 Termux是一个Android终端仿真器和Linux环境应用程序 直接工作 无需根目录或设置 额外的软件包可以使用APT软件包管理器来使用 不需要root 有root更方便修改代码 下载地址 Termux 0 99 T
  • 人脸识别(dlib.face_recognition_model_v1 方法 -- 使用resnet模型)

    人脸识别 思路 通过检测面部特征 对该特征与数据存放的特征进行比对 文件结构 文件名 weights 的目录下 resnet模型 dat文件 识别68个关键点模型 dat文件 共两个模型文件 补充 你如果不使用dlib库中自带的HOG人脸检
  • 网络基础 (深信服)

    一 走进网络世界 1 1 1 企业网络环境介绍 计算机网络类型 LAN 本地局域网 Local Area Network 通常指几千米以内的 可通过某种介质互联的计算机 打印机 modem或其他设备的集合 WAN 广 域 网 Wide Ar
  • 【C语言】你还在写void main()吗?我劝你别用,小心出BUG

    目录 前言 C语言标准并不支持void main 用void main 可能会报错 总结 前言 你的教材上是不是经常出现void main 呢 我想说 永远不要写void main 为什么 这种写法普遍存在于我们国内的很多教材 既然出现在教
  • day02-08 python基础语法

    模块一 python基础语法 day2 快速上手 今日概要 课程目标 学习Python最基础的语法知识 可以用代码快速实现一些简单的功能 课程概要 初识编码 密码本 编程初体验 输出 初识数据类型 变量 注释 输入 条件语句 1 编码 密码
  • [编程题]输出元素组成数组的排列组合形式

    题目 一个由有限个不同元素组成的数组的所有组合排列形式 要求排列的顺序以从小到大的顺序排列 按首列排序 首列相同 则按照第二列排序 前两列相同 则以第三列排序 以此顺序递推 输入例子1 1 2 输出例子1 1 2 2 1 例子说明1 输出结
  • 服务器划分多台虚拟pc,pc服务器建立多台虚拟主机

    pc服务器建立多台虚拟主机 内容精选 换一换 虚拟IP主要用在弹性云服务器的主备切换 达到高可用性HA High Availability 的目的 当主服务器发生故障无法对外提供服务时 动态将虚拟IP切换到备服务器 继续对外提供服务 了解更
  • 使用LineProfiler找出代码的计算瓶颈

    实现同样一个功能 笔者运行需要11秒 而同窗的运行仅需要1秒不到 但是实际实现逻辑是类似的 所以需要使用性能分析工具对瓶颈进行分析 安装 命令行安装 pip install line profiler 本地下载后安装 https www l
  • IDEA 2020.1汉化问题解决办法

    IDEA2020 1 如何汉化 百度网盘链接 汉化版本 zh 201 6668 113 链接 https pan baidu com s 12Fq5QqgeRRdu6 2XIu37tA 提取码 Dl12 安装步骤 第一种 如果插件中心可以直
  • Python 的数据可视化之常用的那些图的简单示例

    参考网站 https pyecharts org zh cn intro 柱形图 折线图 饼图 词云 动态散点图 关系图 散点图 树图 1 柱形图 rom pyecharts charts import Bar from pyecharts
  • 关于毛刺

    关于毛刺 http blog csdn net guqian110 article details 17304065 目录 1 毛刺的产生原因 冒险和竞争 使用分立元件设计电路时 由于PCB在走线时 存在分布电容和电容 所以在几ns内毛刺被
  • colorui radio 样式_uni-app 修改 radio/checkbox/switch 组件样式

    我们在用 uni app 开发前端页面时 往往需要修改一些组件的默认样式 特别是颜色 那么如何修改 radio checkbox switch 单选框 复选框 开关 的样式呢 可以通过覆盖样式的方式实现 下面以单选框 radio 为例 基于