二十四、小程序中改变checkbox和radio的样式
来源:https://blog.csdn.net/qq_39364032/article/details/79742415
- 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio的样式会有些不同。
- 1. 修改checkbox样式
- .wxml
- <checkbox-group class='pull-left' bindchange="checkboxChange">
- <label class="checkbox flex flex-vc ">
- <checkbox bindchange='checkboxChange' value="" checked="{{checkboxStatus}}" color='#fff'/>
- <view>可用2000个积分币抵扣</view>
- </label>
- </checkbox-group>
- .wxss
- /* checkbox未选中时样式 */
- checkbox .wx-checkbox-input{
- border-radius: 3rpx;
- height: 26rpx;
- width: 26rpx;
- margin-top: -4rpx;
- /* 自定义样式.... */
- }
- /* checkbox选中时样式 */
- checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
- background-color: #e02e24;
- border: 1rpx solid #e02e24;
- /* 自定义样式.... */
- }
- 2. 修改radio样式
- .wxml
- <radio-group class="radio-group" bindchange="radioChange">
- <label class="radio" wx:for="{{items}}">
- <radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}}
- </label></radio-group>
- .wxss
- /* radio未选中时样式 */
- radio .wx-radio-input{
- border-radius: 3rpx;
- height: 26rpx;
- width: 26rpx;
- margin-top: -4rpx;
- /* 自定义样式.... */
- }
- /* radio选中时样式 */
- radio .wx-radio-input.wx-radio-input-checked::before{
- background-color: #e02e24;
- border: 1rpx solid #e02e24;
- /* 自定义样式.... */
- }
二十四、小程序中改变checkbox和radio的样式的更多相关文章
- 二十四、Struts2中的UI标签
二十四.Struts2中的UI标签 Struts2中UI标签的优势: 数据回显 页面布局和排版(Freemark),struts2提供了一些常用的排版(主题:xhtml默认 simple ajax) ...
- Android笔记(二十四) Android中的SeekBar(拖动条)
拖动条和进度条非常相似,只是进度条采用颜色填充来表明进度完成的程度,而拖动条则通过滑块的位置来标识数值——而且拖动条允许用户拖动滑块来改变值,因此拖动条通常用于对系统的某种数值进行调节,比如调节音量等 ...
- Python脚本控制的WebDriver 常用操作 <二十四> 定位frame中的元素
测试用例场景 处理frame需要用到2个方法,分别是switch_to_frame(name_or_id_or_frame_element)和switch_to_default_content() 如 ...
- (二十四)mongodb中group的问题二
今天的工作还是继续昨天没有完成的,由于对mongodb数据库的不熟悉,导致昨天的思路上也出了一点问题,我需要查询出同一个ruleID中不同的processingID的条数,然后根据条数来排列先后顺序, ...
- 学以致用二十四-----shell脚本中的列表及space
1.接触列表的概念是在pyhon中,殊不知在shell中也是有列表的. 如: 结果 列表的下标和python中一样,也是以0开头 注意 list 和list2 的区别 一个是用括号括起来,一个是用 ...
- 二十四、python中sys模块
'''1.sys.argv:命令行参数List,第一个元素是程序本身路径''' import sys print (sys.argv)-------------------------------[' ...
- 二十四、SAP中打开帮助文件
一.在代码输入界面,选中一个关键词,按一下F1,或者问号 二.显示出的帮助内容
- 关于微信小程序中组件和页面对全局样式的继承性
1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式
- 微信小程序开发:学习笔记[3]——WXSS样式
微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...
随机推荐
- MySQL中lock tables和unlock tables浅析
MySQL中lock tables和unlock tables浅析 在MySQL中提供了锁定表(lock tables)和解锁表(unlock tables)的语法功能,ORACLE与SQL Se ...
- Springboot helloworld入门最经典例子
一.建立maven java项目 导入springboot包 二.配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0 ...
- MySQL复制错误1837的相关缺陷一例
故障现象 主从gtid报错,复制错误1837,这个复制故障可以说是第一次遇到. Last_Errno: 1837 Last_Error: Error 'When @@SESSION.GTID_NEXT ...
- Windows下强制删除文件或文件夹(解除文件占用/Unlock)
前言 在windows下,有时候会碰到一些文件无法删除,尽量使用“管理员取得所有权” ,但文件或文件夹依然无法删除,这一点非常苦恼. 本文记录几款可以解锁文件占用的软件. ProcessHacker ...
- DubboAdmin部署
1.软件下载 部署管理后台和监控中心需要以下软件 opensesame 下载地址:https://github.com/alibaba/opensesame Dubbo源码下载 https://g ...
- C语言 矩阵的转置及矩阵的乘法
C语言 矩阵的转置及矩阵的乘法 //凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1.矩阵的转置 #include<stdio.h> #defi ...
- C语言 统计一篇英文短文中单词的个数
//凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ #include<stdio.h> #define N 1000 void main(){ ] ...
- Python爬虫-04:贴吧爬虫以及GET和POST的区别
目录 1. URL的组成 2. 贴吧爬虫 2.1. 只爬贴吧第一页 2.2. 爬取所有贴吧的页面 3. GET和POST的区别 3.1. GET请求 3.2. POST请求 3.3. 有道翻译模拟发送 ...
- JavaScript在网页中使用以及注意事项
<script>标签的解析<script>xxx</script>这组标签,是用于在 html 页面中插入 js 的主要方法.它主要有以下几个属性:charset: ...
- 为什么java的类是单继承的,接口是多继承的
类 如果一个类继承了两个类,但是这两个类中有相同的方法,那么子类调用方法时,无法确定应该调用哪个父类的方法. [c++是多继承的] 接口 jdk1.7 接口可以多继承,是因为当接口中是抽象方法.不存 ...