【uni-app】深度作用选择器解决修改checkbox样式无效问题

已于 2023-02-25 17:56:56 修改
阅读量8.4k 收藏 31
点赞数 9
文章标签： 前端 uni-app
于 2022-02-16 08:34:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43655896/article/details/122955576
版权
本文介绍了在uni-app中如何使用深度作用选择器解决修改内置组件checkbox样式无效的问题。通过添加>>>、/deep/或:v-deep来穿透组件样式隔离，实现样式覆盖。同时，针对小程序平台与H5端的类名差异，提出了使用条件注释进行跨端兼容的解决方案。
摘要由CSDN通过智能技术生成

uni-app表单多项选择器需要使用内置组件checkbox，具体使用见官网链接，如下：

checkbox - uni-app官网 (dcloud.io)

官方给出h5端的默认样式是这样的：

​

现在需要修改样式为这样：

​

于是开始修改：

<checkbox-group @change="checkboxChange">
    <label class="radio">
	    <checkbox :value="item+''" class="checkbox"/>
	    <image :src="item.imgUrl" class="friend-avator"></image>
	    view class="friend-name">{
  {item.name}}</view>
最低0.47元/天 解锁文章
玖伴_
关注
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】修改uniapp-checkbox复选框的样式
weixin_48596030的博客
07-15 3937
【uniapp-checkbox】修改uniapp-checkbox复选框的样式
uni-app 内置组件checkbox实现全选功能
djdjnxnd的博客
02-04 3433
由于uni-app的checkbox不能v-model双向绑定实现选中状态的切换，只能用单项绑定:checked实现状态的切换。这就非常的麻烦了下面我说一下解决方法.2.为v-for循环的每一个子项的checkbox 绑定checked，确保你的列表被checkbox-group包裹然后绑定changeCheckbox函数。它的detail.value为选中checkbox的value值数组,。如果要实现如下图所示的全选功能必须借助这个事件。为checkbox的checked属性设置一个单独的ref。
uniapp小程序checkbox实现全选&取消全选操作（computed计算属性）
最新发布
2201_75977789的博客
10-23 543
这里很多码友们会遇到的问题是，如果是input标签的话 那就很好办可以用v-model与你listData里的isSelect进行双向绑定（即数据变化了，勾选状态也会发生变化），这样你后期点击了全选选框时，触发set()时，改变你listData双向绑定的值才能实现全选/取消全选的操作，可uniapp内置组件checkbox貌似不支持v-model,这就需要我们手动去实现一下。接下来是全选框的逻辑，我们需要定义一个计算属性isAllSelect，给它设置set() get()拦截。
uniapp微信小程序修改组件样式失效（解决方案）
qq_44741577的博客
09-29 706
表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。在微信小程序平台上。这是因为微信小程序对于组件样式的处理具有一定的隔离性，旨在防止样式冲突，这被称为样式隔离。表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；提供的配置项，用于控制组件样式的作用域。
uniapp中组件库的Checkbox 复选框 的丰富使用方法
精通前端技术，了解后端接口
01-03 6236
data() {return {// 基本案列数据name: '苹果',},name: '香蕉',},name: '橙子',],},methods: {
修改uniapp内置组件checkbox的样式
qq_45569925的博客
05-27 845
将形状修改为圆形，将背景色修改为蓝色，将对号修改为白色。将以上代码添加值css中即可实现如下效果。
uniapp的checkbox样式修改
wy_319的博客
04-25 3850
第一步：编写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 !...
uni-app修改checkbox样式
weixin_44659286的博客
06-09 595
/* #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
uniapp 勾选框修改样式
zhou_hugh的博客
06-25 791
原文链接：https://blog.csdn.net/weixin_48596030/article/details/125807343。important;// 选中后对勾大小，不要超过背景的尺寸。important;// 选中后对勾大小，不要超过背景的尺寸。important;// 对勾大小 30rpx ///自定义checkbox的样式（ 元素使用的时候就是使用类名：mycheck）// 选中后的 对勾样式。
uni-app 之组件 入门教程 uniapp在线教程 uni app视频教程
06-20
常见的表单组件有Input（文本输入框）、Textarea（多行文本输入框）、Checkbox（复选框）、Radio（单选按钮）、Picker（选择器）、DatePicker（日期选择器）、TimePicker（时间选择器）等。这些组件不仅方便用户填写...
uni-app入门
01-08
- 老的HTML标签也可以在uni-app中使用，但不推荐，因为这可能导致H5端的调试混乱和选择器问题 **uni-app的新组件** uni-app引入了一些新的组件，适应移动端开发需求： - `scroll-view`：可区域滚动视图容器 - `...
uni-app 介绍及使用
zhangxiaobai___的博客
11-28 2801
uni-app、小程序、vue
uni-app的组件（二）
2302_78070106的博客
01-17 1770
uni-app的组件
如何修改uniapp的checkbox样式？
我想月薪过万的博客
08-24 6957
//设置圆角 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 深度选择器 ::deep
热门推荐
snoto的专栏
05-18 1万+
文章目录使用场景解决方式 使用场景 引入使用了第三方的组件，想修改它的样式，找到其class名称，然后在style中重写该class，无效 原因：可以查看下面的文章 官方的解释 解决方式 比如我使用的是u-grid，看到它的class的层级是： <...u-grid...> <...u-grid-item...> <...u-grid-item-box...> ... ... 我要修改的是u-grid-item-box的内联样式的padding属性 使用深
微信小程序checkbox样式修改
linanran1027的博客
09-20 1873
/*checkbox 选项框大小 */ checkbox .wx-checkbox-input { width: 36rpx; height: 36rpx; border-radius: 50%; } /*checkbox选中后样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked { b...
uni-app的checkbox样式修改
06-10
要修改uni-app的checkbox样式，可以通过以下步骤实现： 1. 在页面的`<style>`标签中添加样式代码。 例如，要修改checkbox的选中状态的颜色为红色，未选中状态的颜色为灰色，可以添加以下代码： ```css /* 选中状态的样式 */ input[type="checkbox"]:checked+label::before { border-color: red; background-color: red; } /* 未选中状态的样式 */ input[type="checkbox"]+label::before { border-color: gray; background-color: gray; } ``` 2. 在页面的`<template>`标签中添加checkbox元素。 例如，要添加一个checkbox元素，可以添加以下代码： ```html <template> <div> <input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1"> <label for="checkbox1">checkbox1</label> </div> </template> ``` 这样就可以实现对uni-app的checkbox样式的修改了。需要注意的是，以上代码只是示例，具体的样式修改可以根据实际需求进行调整。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值