微信小程序 - 重置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 ...
随机推荐
- vue3剖析:响应式原理——effect
响应式原理 源码目录:https://github.com/vuejs/vue-next/tree/master/packages/reactivity 模块 ref: reactive: compu ...
- IDEA中Javaweb项目图片加载不出来解决方案
针对IDEA中Javaweb项目中无法加载图片 一.项目的结构及问题介绍 项目结构如下: 在500.jsp页面中访问了img目录下的相关图片,比如背景图片,我在500.jsp中是这样写的路径 bac ...
- ajax之---上传文件
“伪”ajax向后台提交文件 <iframe style="display: none" id="iframe1" name="i ...
- pycharm2020.2破解版教程激活码支持Windows Linux Mac系统-中关村老大爷
听说很多朋友想要PyCharm专业版2020.2的破解教程.现在来了,亲测破解成功.支持mac linux windows系统.本教程提供官方安装包.激活码和注册补丁. 本教程仅供学习和讨论,禁止商业 ...
- java8的interface的方法定义
转自https://www.cnblogs.com/zhenghengbin/p/9398682.html Java8新特性(一)_interface中的static方法和default方法 为什 ...
- 【论文】The Road to SDN: An Intellectual History of Programmable Networks
目录 ABSTRACT: 1 Introduction: 2 The Road to SDN: 2.1 Active Networking Technology push and use pull I ...
- CBC字节翻转攻击
iscc2018线上赛开始两周多了,学到了很多,写几篇文章总结一下遇到的知识点,做一个归纳,方便以后查找. web300-----CBC字节翻转攻击 cbc是AES加密的cbc模式 即密码分组链模式: ...
- MySQL手注之盲注(布尔)
布尔注入: 当我们在注入的过程中输入的语句在页面没有数据返回点,这就需要利用布尔型盲注一步步来猜取想要的数据.(盲注分为布尔盲注和时间盲注) 盲注常用函数: length() 返回字符串的长度, 可 ...
- 使用deeplabv3+训练自己数据集(迁移学习)
概述 在前边一篇文章,我们讲了如何复现论文代码,使用pascal voc 2012数据集进行训练和验证,具体内容可以参考<deeplab v3+在pascal_voc 2012数据集上进行训练& ...
- djano jwt 的使用
1.5 JWT:使用djangorestframework-jwt模块进行用户身份验证 安装: pip install djangorestframework-jwt 添加应用:pytho ...