来源: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;

/* 自定义样式.... */

}

  

最新文章

  1. poj2186Popular Cows(Kosaraju算法--有向图的强连通分量的分解)
  2. 。net 添加或获取文件关联
  3. 数据库路由器 ICX
  4. 使用windows服务和MSMQ和进行日志管理(解决高并发问题)
  5. 二叉树单色路径最长&amp;&amp;穿珠子
  6. Android-取消GridView/ListView item被点击时的效果
  7. Aandroid Error之 新导入工程报Unable to resolve target &#39;android-18&#39;和R cannot be resolved
  8. 【Web】十步教你搭建完整免费的个人网站(花生壳+XAMPP+WordPress)
  9. Atitit.web三编程模型 Web Page Web Forms 和 MVC
  10. App上线Check List
  11. identity server4 证书
  12. idea找不到tools.jar下的内容的解决方法
  13. kettle连接oracle报错oracle.i18n.text.converter.CharacterConverter.OGS.getInstance(I)Loracle/i18n/text/converter/CharacterConverter
  14. Partition(hdu4651)2013 Multi-University Training Contest 5
  15. Python 进程池的异步方法
  16. 电话、地址、Email等常用正则表达式
  17. Java 单生产者消费者问题
  18. BZOJ5104 Fib数列(二次剩余+BSGS)
  19. QlikView图表显示同比数据
  20. PHP之string之str_repeat()函数使用

热门文章

  1. web前端(2)—— 前端技术介绍
  2. 转:敏捷开发之Scrum扫盲篇
  3. c函数指针
  4. 团队作业—预则立&amp;&amp;他山之石
  5. 微信小程序本地引用iconfont(阿里巴巴矢量图标库)
  6. Nginx的configure各项中文说明
  7. 部署tinyproxy代理服务
  8. 处理HTML5新标签的浏览器兼容问题
  9. Linux发展史-简简简易版
  10. raise ValueError(&quot;Cannot convert {0!r} to Excel&quot;.format(value))