/* 未选中的 背景样式 */
checkbox .wx-checkbox-input {
border-radius: 50%;/* 圆角 */
width: 30rpx; /* 背景的宽 */
height: 30rpx; /* 背景的高 */
}
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #fd9e7d;
border: 1rpx solid #fd9e7d;
color: #fff;
font-size: 24rpx;
}
/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 30rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
height: 28rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
line-height: 28rpx;
text-align: center;
font-size: 24rpx; /* 对勾大小 */
background: transparent;
color: #fff;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}

微信小程序 - 重置checkbox样式的更多相关文章

  1. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

  2. 微信小程序:WXSS 样式

    微信小程序:WXSS 样式 一.WXSS 样式 XSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 1,新增了尺寸单位: 在写 CSS 样式时,开发者需要考虑到手机设备的屏 ...

  3. 微信小程序切换标签改变样式

    微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class=" ...

  4. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  5. 微信小程序子组件样式不起作用的解决办法

    今天我在编写微信小程序项目时,发现父组件引用子组件过后,子组件的样式不起作用,在上网查了很多解决办法后,成功解决了这一问题. 解决办法: 1.在全局样式文件app.wxss中引入子组件的样式,如 @i ...

  6. 微信小程序tabbar设置样式在哪里改

    微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...

  7. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  8. 微信小程序button组件样式

    点击微信按键组件才能出授权,所以自定义样式就是必须的了,来自网友的帮助,如下图 <button class='btn1' open-type='contact'> <image cl ...

  9. 微信小程序 open-data更改样式 open-data 显示头像 圆形

    废话不多说,直接看效果: 效果一: 代码如下: <view class='zhubo'> <view class='zhuboLeft'> <view class='zh ...

随机推荐

  1. 一起来读官方文档-----SpringIOC(04)

    1.4.2.依赖性和详细配置 如上一节所述,您可以将bean属性和构造函数参数定义为对其他托管bean(协作者)的引用或内联定义的值.Spring的基于XML的配置元数据为此目的在其和元素中支持子元素 ...

  2. pthon中取整的几个方法round、int、math

    取整的几种方法:1.四舍五入 round(x) 2.向下取整  int(x) 3.取商和余 4.向上取整,需要用到math.ceil(x)(可以理解成大于x且最接近x的整数)import math 5 ...

  3. ajax之---上传图片和预览

    views.py def upload_img(request): nid=str(uuid.uuid4()) ret={'status':True,'data':None,'message':Non ...

  4. windows下nginx的配置

    这里做的nginx的配置主要的功能是: 能够用localhost访问本地文件夹中的项目 输入ip地址访问本地文件夹中的项目 反向代理其他地址访问本地文件 1.nginx安装地址 2.解压之后的文件如下 ...

  5. Qt 展示pdf内容(新窗口或嵌入,pdfjs,linux)

    前言:初学Qt,在网上查找了诸多资料,有什么poppler.mupdf啊巴拉巴拉的,结果一个比一个费劲,最后还是采用pdfjs较为方便高效,为方便相关问题搜索,写了一下内容. 需求描述:Qt应用中不支 ...

  6. python-数据清洗与编码解码

    0x01 join str = 'hk$$yicunyiye$$hello world' print(str.split('$$')) #自己实现 result = '' for i in str.s ...

  7. Java源码赏析(一)Object 类

    写这个系列的原因,其实网上已经有无数源码分析的文章了,多一篇不多,少一篇不少,但为什么还要写这部分文章呢?于私,其一,上班族已经很久没有打过完整的一整段有意义的话,算是锻炼个人的书写.总结能力,其二, ...

  8. java 判断jsonObject 对象为null的天坑问题

    jsonObject = {"mmbRetrieveBookingResponse":{"bookingData":null,"isAfterTran ...

  9. Python-__init__ 和 __new__区别和原理

    __init__ 和 __new__区别 1. 从传递参数角度看,__init__第一个参数是实例本身, __new__传递的是类本身 2. 从执行顺序角度看,__new__方法执行在 __init_ ...

  10. K8S环境的Jenkin性能问题处理

    环境信息 在K8S环境通过helm部署了Jenkins(namespace为helm-jenkins),用于日常Java项目构建: kubernetes:1.15 jenkins:2.190.2 he ...