来源:https://blog.csdn.net/qq_39364032/article/details/79742415

  1. 在微信小程序里面,有时候为了配合整个项目的风格,checkboxradio的样式会有些不同。
  2.  
  3. 1. 修改checkbox样式
  4.  
  5. .wxml
  6.  
  7. <checkbox-group class='pull-left' bindchange="checkboxChange">
  8.  
  9. <label class="checkbox flex flex-vc ">
  10.  
  11. <checkbox bindchange='checkboxChange' value="" checked="{{checkboxStatus}}" color='#fff'/>
  12.  
  13. <view>可用2000个积分币抵扣</view>
  14.  
  15. </label>
  16.  
  17. </checkbox-group>
  18.  
  19. .wxss
  20.  
  21. /* checkbox未选中时样式 */
  22.  
  23. checkbox .wx-checkbox-input{
  24.  
  25. border-radius: 3rpx;
  26.  
  27. height: 26rpx;
  28.  
  29. width: 26rpx;
  30.  
  31. margin-top: -4rpx;
  32.  
  33. /* 自定义样式.... */
  34.  
  35. }
  36.  
  37. /* checkbox选中时样式 */
  38.  
  39. checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  40.  
  41. background-color: #e02e24;
  42.  
  43. border: 1rpx solid #e02e24;
  44.  
  45. /* 自定义样式.... */
  46.  
  47. }
  48.  
  49. 2. 修改radio样式
  50.  
  51. .wxml
  52.  
  53. <radio-group class="radio-group" bindchange="radioChange">
  54.  
  55. <label class="radio" wx:for="{{items}}">
  56.  
  57. <radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}}
  58.  
  59. </label></radio-group>
  60.  
  61. .wxss
  62.  
  63. /* radio未选中时样式 */
  64.  
  65. radio .wx-radio-input{
  66.  
  67. border-radius: 3rpx;
  68.  
  69. height: 26rpx;
  70.  
  71. width: 26rpx;
  72.  
  73. margin-top: -4rpx;
  74.  
  75. /* 自定义样式.... */
  76.  
  77. }
  78.  
  79. /* radio选中时样式 */
  80.  
  81. radio .wx-radio-input.wx-radio-input-checked::before{
  82.  
  83. background-color: #e02e24;
  84.  
  85. border: 1rpx solid #e02e24;
  86.  
  87. /* 自定义样式.... */
  88.  
  89. }

  

二十四、小程序中改变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. MySQL中lock tables和unlock tables浅析

    MySQL中lock tables和unlock tables浅析   在MySQL中提供了锁定表(lock tables)和解锁表(unlock tables)的语法功能,ORACLE与SQL Se ...

  2. Springboot helloworld入门最经典例子

    一.建立maven java项目 导入springboot包 二.配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0 ...

  3. MySQL复制错误1837的相关缺陷一例

    故障现象 主从gtid报错,复制错误1837,这个复制故障可以说是第一次遇到. Last_Errno: 1837 Last_Error: Error 'When @@SESSION.GTID_NEXT ...

  4. Windows下强制删除文件或文件夹(解除文件占用/Unlock)

    前言 在windows下,有时候会碰到一些文件无法删除,尽量使用“管理员取得所有权” ,但文件或文件夹依然无法删除,这一点非常苦恼. 本文记录几款可以解锁文件占用的软件. ProcessHacker ...

  5. DubboAdmin部署

    1.软件下载 部署管理后台和监控中心需要以下软件 opensesame  下载地址:https://github.com/alibaba/opensesame Dubbo源码下载  https://g ...

  6. C语言 矩阵的转置及矩阵的乘法

    C语言 矩阵的转置及矩阵的乘法 //凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1.矩阵的转置 #include<stdio.h> #defi ...

  7. C语言 统计一篇英文短文中单词的个数

    //凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ #include<stdio.h> #define N 1000 void main(){ ] ...

  8. Python爬虫-04:贴吧爬虫以及GET和POST的区别

    目录 1. URL的组成 2. 贴吧爬虫 2.1. 只爬贴吧第一页 2.2. 爬取所有贴吧的页面 3. GET和POST的区别 3.1. GET请求 3.2. POST请求 3.3. 有道翻译模拟发送 ...

  9. JavaScript在网页中使用以及注意事项

    <script>标签的解析<script>xxx</script>这组标签,是用于在 html 页面中插入 js 的主要方法.它主要有以下几个属性:charset: ...

  10. 为什么java的类是单继承的,接口是多继承的

    类 如果一个类继承了两个类,但是这两个类中有相同的方法,那么子类调用方法时,无法确定应该调用哪个父类的方法. [c++是多继承的] 接口 jdk1.7  接口可以多继承,是因为当接口中是抽象方法.不存 ...