【uniapp-checkbox】修改uniapp-checkbox复选框的样式

已于 2022-07-15 16:46:21 修改
阅读量3.7k 收藏 7
点赞数 2
分类专栏： Vue uniapp 文章标签： vue.js 前端 javascript
于 2022-07-15 16:25:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48596030/article/details/125807343
版权
uniapp 同时被 2 个专栏收录
65 篇文章 2 订阅 ¥99.90 ¥299.90
订阅专栏 超级会员免费看
Vue
36 篇文章 0 订阅 ¥99.90 ¥299.90
订阅专栏 超级会员免费看
本文介绍了如何在uniapp中针对自带的checkbox组件进行样式自定义，通过在APP.vue文件中添加SCSS代码，实现对checkbox的大小、颜色等样式修改。同时展示了如何在页面标签中添加自定义类名，以便应用这些样式。通过这种方法，可以统一和优化UI界面的视觉效果。
摘要由CSDN通过智能技术生成

哈喽大家好~我是马小跳。一名进阶中的程序媛。

在这里记录下自己成长的每一次进步，希望遇到志同道合的猿友

一起努力，一起把技术up up up！！！

在这里插入图片描述

1.在APP.vue中写样式

使用uniapp自带的checkbox时，修改样式必须在APP.vue中修改：

<style lang="scss">

	//自定义checkbox的样式（ 元素使用的时候就是使用类名：mycheck）
	checkbox.mycheck .wx-checkbox-input,
	checkbox.mycheck .uni-checkbox-input {
   
		width
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小跳不会Coding
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
订阅专栏
uniapp - 强力覆盖 checkbox 复选框样式，将复选框由方框形状改为圆形、修改里面的 √ 对号大小、填充复选框背景色（改掉默认的 uniapp checkbox 系统内置组件样式）兼容全端
王佳斌
12-16 1万+
uniapp修改checkbox复选框样式，uniapp checkbox 覆盖样式教程，uniapp修改checkbox复选框不生效，uniapp如何覆盖checkbox内置组件的样式，uniapp checkbox内置复选框组件怎么变成圆形，uniapp checkbox修改大小背景颜色等样式，uniapp h5 app安卓苹果 小程序修改覆盖checkbox的默认样式，uniapp 修改checkbox复选框样式，uni-app中更改复选框的默认样式，uniapp 修改radio/checkbox(单
uniapp checkbox 默认选中
missxiang629的博客
09-15 1536
【代码】uniapp checkbox 默认选中。
修改uniapp内置组件checkbox的样式
qq_45569925的博客
05-27 728
将形状修改为圆形，将背景色修改为蓝色，将对号修改为白色。将以上代码添加值css中即可实现如下效果。
uniapp使用uview-ui的checkbox复选框，全选与全不选功能
weixin_43839635的博客
07-15 1098
#uni-app全选与不全选功能
如何修改uniapp的checkbox样式？
我想月薪过万的博客
08-24 6740
//设置圆角 checkbox.round .wx-checkbox-input, checkbox.round .uni-checkbox-input { border-radius: 100upx; } //设置背景色 checkbox.red[checked] .wx-checkbox-input, checkbox.red.checked .uni-checkbox-input{ background-color: #e54d42 !important; border-color: #e5.
uniapp的checkbox样式修改
wy_319的博客
04-25 3797
第一步：编写css 必须写在APP.vue文 //圆角设置 checkbox.round .wx-checkbox-input, checkbox.round .uni-checkbox-input { border-radius: 100rpx; } //背景色设置 checkbox.red[checked] .wx-checkbox-input, checkbox.red.checked .uni-checkbox-input{ background-color: #e54d42 !...
uniapp 勾选框修改样式
zhou_hugh的博客
06-25 435
原文链接：https://blog.csdn.net/weixin_48596030/article/details/125807343。important;// 选中后对勾大小，不要超过背景的尺寸。important;// 选中后对勾大小，不要超过背景的尺寸。important;// 对勾大小 30rpx ///自定义checkbox的样式（ 元素使用的时候就是使用类名：mycheck）// 选中后的 对勾样式。
微信小程序checkbox样式修改
linanran1027的博客
09-20 1822
/*checkbox 选项框大小 */ checkbox .wx-checkbox-input { width: 36rpx; height: 36rpx; border-radius: 50%; } /*checkbox选中后样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked { b...
uniapp组件-uni-data-checkbox 复选框 回显
最新发布
07-17
在UniApp中，`uni-data-checkbox` 是一个用于创建复选框组件的，它允许用户选择一项或多项。如果你想让这个组件在页面加载时显示已选状态，即回显已有数据，你可以这样做： 首先，在你的项目里，你需要准备一个数据...
uniapp - 强力覆盖 checkbox 复选框样式兼容全端app
11-11
Uniapp是一个基于Vue.js的跨平台应用开发框架，它强力覆盖了checkbox复选框样式，使得复选框在不同的移动端app上都能有良好的兼容性。 在Uniapp中，开发者可以通过简单的代码实现复选框的样式定制和覆盖。这意味着...
【uni-app】深度作用选择器解决修改checkbox样式无效问题
weixin_43655896的博客
02-16 8372
uni-app表单多项选择器需要使用内置组件checkbox，具体使用见官网链接，如下： checkbox - uni-app官网 (dcloud.io) 官方给出的默认样式是这样的： ​ 现在需要修改样式为这样： ​ 于是开始修改： <checkbox-group @change="checkboxChange"> <label class="radio"> <checkbox :value="item+''"/> <
uni-app修改checkbox样式
weixin_44659286的博客
06-09 577
/* #ifndef APP-NVUE */ .uni-checkbox-wrapper .uni-checkbox-input-checked { border-color: #ff0000 !important; color: #ff0000 !important; } .uni-checkbox-wrapper .uni-checkbox-input { border-color: #d1d1d1; } uni-checkbox:not([disabled]) .uni-ch
uni-app 更改默认checkbox组件样式
热门推荐
zhangxy
08-28 2万+
更改的时候需要注意以下几点： 1、因为uni-app的默认组件是定义好了的，如果要修改可以找到组件所属css，也可以自行修改样式并覆盖原有样式。 2、选择自行修改的时候，一定在app.vue页面去引入更改的css或者直接在此页面进行修改，否则修改无效。 3、不要在style中增加scoped属性。 4、注意小程序中跟h5页面是略有不同的，如下官方语句 以下附加我更改的样式： /...
uni-app小程序自定义checkbox，改样式改形状
qq_51463650的博客
03-15 5009
uni-app小程序自定义checkbox，颜色可以随意更改，形状原为方块，可以更改为圆形，以下是代码...
如何改变uniapp中checkbox样式
爬楼梯的前端小白的博客
04-14 2877
第一步:复制 这一段要写在app.vue中才可生效 //设置圆角 checkbox.round .wx-checkbox-input, checkbox.round .uni-checkbox-input { border-radius: 100upx; } //设置背景色 checkbox.red[checked] .wx-checkbox-input, checkbox.red.checked .uni-checkbox-input{ background-color:
uniapp 1、checkbox 样式更改，2、checkbox-group多个选框
jack_rose_me的博客
10-12 3318
<checkbox :checked="radioFlag" style="transform:scale(0.7)"/> /*checkbox选中后样式 */ checkbox .wx-checkbox-input { border-radius: 50% !important; } /*checkbox选中后图标样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked { color: #fff; backgroun
uniapp修改checkbox的style样式小程序与安卓端
真的是哪个男人！
04-09 814
/* #ifdef APP-PLUS */ uni-checkbox .uni-checkbox-input { transform: scale(0.67); border-radius: 50rpx; } uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked { border: 1rpx solid #f50; background-color: #f50; } uni-checkbox .uni-chec
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值