微信小程序 - 重置checkbox样式
/* 未选中的 背景样式 */
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样式的更多相关文章
- 微信小程序wxss设置样式
微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...
- 微信小程序:WXSS 样式
微信小程序:WXSS 样式 一.WXSS 样式 XSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 1,新增了尺寸单位: 在写 CSS 样式时,开发者需要考虑到手机设备的屏 ...
- 微信小程序切换标签改变样式
微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class=" ...
- 微信小程序----wxss设置样式
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序子组件样式不起作用的解决办法
今天我在编写微信小程序项目时,发现父组件引用子组件过后,子组件的样式不起作用,在上网查了很多解决办法后,成功解决了这一问题. 解决办法: 1.在全局样式文件app.wxss中引入子组件的样式,如 @i ...
- 微信小程序tabbar设置样式在哪里改
微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...
- 微信小程序------导航栏样式、tabBar导航栏
一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...
- 微信小程序button组件样式
点击微信按键组件才能出授权,所以自定义样式就是必须的了,来自网友的帮助,如下图 <button class='btn1' open-type='contact'> <image cl ...
- 微信小程序 open-data更改样式 open-data 显示头像 圆形
废话不多说,直接看效果: 效果一: 代码如下: <view class='zhubo'> <view class='zhuboLeft'> <view class='zh ...
随机推荐
- 如何使用JSTL获取并显示数据
首先在×××controller里查询数据,并绑定,代码如下: /** * 显示所有租借信息 默认进入这个方法 * * @param resp * @param req * @param manage ...
- 基于jQuery的鼠标悬停时放大图片的效果制作
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
- adb连接手机
1. 通过wifi, 利用adb来连接手机. 在pc的cmd中输入命令: adb connect 192.168.1.100 其中adb就是手机的ip. 如果连接成功, 就可以进入android的sh ...
- JVM运行时数据区划分
Java内存空间 内存是非常重要的系统资源,是硬盘和cpu的中间仓库及桥梁,承载着操作系统和应用程序的实时运行.JVM内存布局规定了JAVA在运行过程中内存申请.分配.管理的策略,保证了JVM的高效稳 ...
- tagCould3d 移动端优化版
针对https://github.com/bitjjj/JS-3D-TagCloud这个版本的做了移动端性能优化(使用transform做偏移及缩放,优化帧).基本原理一致. class TagCou ...
- 出行即服务(MAAS)框架
转自 出行即服务(MAAS)框架 一.概况 在共享交通模式和智能信息技术的基础之上,城市出现了全新的交通理念——“出行即服务(Mobility-as-a-Service,简称MaaS)”.MaaS将各 ...
- hystrix(5) 延时检测
hystrix在执行命令的同事,会对执行延时进行检测,如果超过设置的延时时间,那么将停止执行,并返回fallback执行结果. if (properties.executionTimeoutEnabl ...
- redis实现计数器
用redis实现计数器 社交产品业务里有很多统计计数的功能,比如: 用户: 总点赞数,关注数,粉丝数 帖子: 点赞数,评论数,热度 消息: 已读,未读,红点消息数 话题: 阅读数,帖子数,收藏数 统计 ...
- Gradle系列之Android Gradle高级配置
本篇文章主要在之前学习的基础上,从实际开发的角度学习如何对 Android Gradle 来进行自定义以满足不同的开发需求,下面是 Gradle 系列的几篇文章: Gradle系列之初识Gradle ...
- 从C++入手,探寻java的特点
java的特点 java语言建立在成熟的算法语言和坚实的面向对象理论的基础上,具有强大的应用系统设计能力,其具备的跨平台特型,其具备的跨平台特型.面向对象和可靠性.安全性等特点是它能够充分适应网络需要 ...