/* 未选中的 背景样式 */
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. 没有修改getModel()方法的返回值导致的Hibernate接收不到页面数据

    异常1.通过id进行查询,但id为null,就出现这个异常!java.lang.IllegalArgumentException: id to load is required for loading ...

  2. xampp安装和使用:windows和linux使用安装微擎小程序

    1.官网下载xampp XAMPP:Apache+MySQL+PHP+PERL,适用于windows+linux+macos x+Solaris等多系统使用 官网地址:https://www.apac ...

  3. CentOS7重装yum和python

    卸载现有的Python和Yum 1.删除现有Python ##强制删除已安装程序及其关联 rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps ...

  4. python爬虫学习过程记录

    项目为爬取Python词条的信息. 项目代码在我的码云仓库. https://gitee.com/libo-sober/learn-python/tree/master/baike_spider 1. ...

  5. Spring中同一个service中方法相互调用事务不生效问题解决方案

    问题描述: 我们在用Spring框架开发Web项目过程中,经常需要用同一个service中的一个方法调用另一个方法,如果此时调用方没有添加事务注解@Transactional,而在被调用方添加事务注解 ...

  6. pxe+kickstart无人值守批量安装linux

    一.原理和概念: 1.PXE:         PXE 并不是一种安装方式,而是一种引导的方式.进行 PXE 安装的必要条件是要安装的计算机中包含一个 PXE 支持的网卡(NIC),即网卡中必须要有 ...

  7. 熬夜23天吃透,九大核心专题,成功收割了阿里、百度、美团3家offer

    前言 今年受疫情影响非常大,春招和金三银四都要比往年来得更迟一些.春招结束之后,我特意把自己的面试经历顺了顺,总结出了不少的经验.对了,这次一共收割了3个大厂offer,分别是蚂蚁金服.美团和网易,特 ...

  8. Vue 3.0 来了,我们该做些什么?

    靓仔路过,不要错过 想必 Vue3.0 发布这件事,大家都知道了. 我也是从朋友圈的转发得知此事,博客平台.公众号.朋友圈基本都有这么一条新闻,可见 Vue3.0 的被期待程度,因为 React 16 ...

  9. 详尽的 Elasticsearch7.X 安装及集群搭建教程

    为了更好的阅读体验,欢迎访问 原文阅读链接 简介 首先引用 Elasticsearch (下文简称 ES)官网的一段描述: Elasticsearch 是一个分布式.RESTful 风格的搜索和数据分 ...

  10. PHP_Code_Challenge 1~30

    1. 1wMDEyY2U2YTY0M2NgMTEyZDQyMjAzNWczYjZgMWI4NTt3YWxmY= <?php error_reporting(0); require __DIR__ ...