来源: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的样式的更多相关文章

  1. 二十四、Struts2中的UI标签

    二十四.Struts2中的UI标签 Struts2中UI标签的优势: 数据回显 页面布局和排版(Freemark),struts2提供了一些常用的排版(主题:xhtml默认 simple ajax) ...

  2. Android笔记(二十四) Android中的SeekBar(拖动条)

    拖动条和进度条非常相似,只是进度条采用颜色填充来表明进度完成的程度,而拖动条则通过滑块的位置来标识数值——而且拖动条允许用户拖动滑块来改变值,因此拖动条通常用于对系统的某种数值进行调节,比如调节音量等 ...

  3. Python脚本控制的WebDriver 常用操作 <二十四> 定位frame中的元素

    测试用例场景 处理frame需要用到2个方法,分别是switch_to_frame(name_or_id_or_frame_element)和switch_to_default_content() 如 ...

  4. (二十四)mongodb中group的问题二

    今天的工作还是继续昨天没有完成的,由于对mongodb数据库的不熟悉,导致昨天的思路上也出了一点问题,我需要查询出同一个ruleID中不同的processingID的条数,然后根据条数来排列先后顺序, ...

  5. 学以致用二十四-----shell脚本中的列表及space

    1.接触列表的概念是在pyhon中,殊不知在shell中也是有列表的. 如: 结果 列表的下标和python中一样,也是以0开头 注意 list 和list2 的区别   一个是用括号括起来,一个是用 ...

  6. 二十四、python中sys模块

    '''1.sys.argv:命令行参数List,第一个元素是程序本身路径''' import sys print (sys.argv)-------------------------------[' ...

  7. 二十四、SAP中打开帮助文件

    一.在代码输入界面,选中一个关键词,按一下F1,或者问号 二.显示出的帮助内容

  8. 关于微信小程序中组件和页面对全局样式的继承性

    1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式

  9. 微信小程序开发:学习笔记[3]——WXSS样式

    微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...

随机推荐

  1. SQL Server如何用SQL实现一批字符串的全部组合

    在SQL Server中,如何用SQL去实现得到一批字符串的全部组合呢?这个是同事在实际需求当中遇到的一个问题,他的具体需求如下所示: 传入参数格式为'1,2,3,224,15,6'   'A,BC, ...

  2. 加密webconfig中的连接字符串,利用RSA非对称加密,利用windows保存密钥容器

    简单的解决方法: WebConfig 加解密,未能使用提供程序“RsaProtectedConfigurationProvider”进行解密.提供程序返回错误消息为: 打不开 RSA 密钥容器.问题: ...

  3. jsp笔记----97DatePicker日期插件简单使用

    <s:form action="" theme="simple"> <s:hidden name="keyword3" v ...

  4. MATLAB中冒号的用法

    MATLAB中冒号的用法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ matlab中冒号代表步长,用实例来说明 >> A=[1 2 3 ...

  5. python3编写网络爬虫21-scrapy框架的使用

    一.scrapy框架的使用 前面我们讲了pyspider 它可以快速的完成爬虫的编写 不过pyspider也有一些缺点 例如可配置化不高 异常处理能力有限对于一些反爬虫程度非常强的网站 爬取显得力不从 ...

  6. MVC四大筛选器—ExceptionFilter

    该筛选器是在系统出现异常时触发,可以对抛出的异常进行处理.所有的ExceptionFilter筛选器都是实现自IExceptionFilter接口 public interface IExceptio ...

  7. Loj #6073.「2017 山东一轮集训 Day5」距离

    Loj #6073.「2017 山东一轮集训 Day5」距离 Description 给定一棵 \(n\) 个点的边带权的树,以及一个排列$ p\(,有\)q $个询问,给定点 \(u, v, k\) ...

  8. A1制作文件夹目录

    第一步 在文件夹目录下建立bat文件,填写以下内容: dir *.* /B >目录.txt 最后双击bat文件. 第二步 运行后复制目录.txt文件内容到空白excel 使用hyperlink函 ...

  9. Memcache分布式锁 转发 https://www.cnblogs.com/li150dan/p/9529090.html

    在分布式缓存的应用中,会遇到多个客户端同时争用的问题.这个时候,需要用到分布式锁,得到锁的客户端才有操作权限 下面通过一个简单例子介绍: 这里引用的是Memcached.ClientLibrary.d ...

  10. ActiveMQ的两种消息模式,主题、队列

    1.开发的模式流程如下: 2.队列模式Queue 如果生产者产生了100条消息,那么两个消费同时在的话,会分工合作来接收这100条消息.就是每个消费者接收到50条来处理. 3.主题模式topic 如果 ...