微信小程序 - 重置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 ...
随机推荐
- 原生JDK网络编程- NIO之Reactor模式
“反应”器名字中”反应“的由来: “反应”即“倒置”,“控制逆转”,具体事件处理程序不调用反应器,而向反应器注册一个事件处理器,表示自己对某些事件感兴趣,有时间来了,具体事件处理程序通过事件处理器对某 ...
- 关于Vue-Router的那些事儿
Vue-Router Vu-router是Vue.js的官方路由管理器,方便于构建页面,在我们的使用过程中,一般是在router的index.js文件中配置对应的组件和对应的路径 主要的功能 嵌套路由 ...
- Springboot中WebMvcConfigurer接口详解
Springboot 使用越来越多,企业的基本框架,到Springcloud分布式,可以说无论面试还是平常技术学习,一说到spring几乎就就代替了Java,可以说spring,springboot的 ...
- graph attention network(ICLR2018)官方代码详解(tensorflow)-稀疏矩阵版
论文地址:https://arxiv.org/abs/1710.10903 代码地址: https://github.com/Diego999/pyGAT 之前非稀疏矩阵版的解读:https://ww ...
- 记一次 node 项目重构改进
摘要:经常听到有祖传的代码一说,就是一些项目经过了很长时间的维护,经过了很多人之手,业务逻辑堆叠的越来越多,然后就变成了一个越来越难以维护. 经常听到有祖传的代码一说,就是一些项目经过了很长时间的维护 ...
- oracle之二实例管理及数据库的启动/关闭
实例管理及数据库的启动/关闭 2.1 实例和参数文件 1.instance 功能:用于管理和访问database.instance在启动阶段读取初始化参数文件(init parameter fil ...
- [算法]体积不小于V的情况下的最小价值(0-1背包)
题目 0-1背包问题,问要求体积不小于V的情况下的最小价值是多少. 相关 转移方程很容易想,初始化的处理还不够熟练,可能还可以更简明. 使用一维dp数组. 代码 import java.util.Sc ...
- java键对值SHA256加密接口请求
import org.apache.http.HttpResponse; import org.apache.http.client.HttpClient; import org.apache.htt ...
- Linux实战(13):Centos8安装FFmpeg
此文章所做的操作参考漏网的鱼:参考链接 步骤1:安装RPMfusion Yum存储库 RHEL或兼容发行版(如CentOS)上启用EPEL. dnf -y install https://downlo ...
- 【JVM系列1】深入分析Java虚拟机堆和栈及OutOfMemory异常产生原因
前言 JVM系列文章如无特殊说明,一些特性均是基于Hot Spot虚拟机和JDK1.8版本讲述. 下面这张图我想对于每个学习Java的人来说再熟悉不过了,这就是整个JDK的关系图: 从上图我们可以看到 ...