微信小程序中修改checkbox的选中样式

近日在做小程序选项框时,发现小程序默认的样式是自带绿色的,在网上也找了各种方法去修改他默认的选中样式。找了多种资料,发现网上的代码样式只能修改单选框的,修改多选框的样式并不起效。

1. 在做单选框时直接用的网上的样式是可以解决的,贴下代码:

radio {

    width: 40rpx;

}

/* 单选框未选中 */

radio .wx-radio-input {

    width: 30rpx;

    height: 30rpx;

    border-radius: 50%;

}

/* 单选框选中后对勾样式 */

radio .wx-radio-input.wx-radio-input-checked::before{

    border-radius: 50%;

    width: 55rpx;

    height: 55rpx;

    line-height: 55rpx;

    text-align: center;

    font-size: 30rpx;   

    color:#fff;

    background-color: #B30000;

    border-color:#B30000;

}

更改后的效果如下:

单选框

2. 多选框:(网上的修改的css样式并不起效,于是去查了官网文档)


看上图,官网文档上已给出了可以绑定color这个属性,于是乎,问题就很好解决了。贴下图解决方法:

首先我们先绑定color属性:

再到data中绑定:

最后 就修改完成了


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 4,813评论 0 7
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,390评论 0 7
  • 大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款”,“待发货”,“待收货”,“已完成”,会跳转页面且跳...
    帅男一枚_4f74阅读 1,484评论 0 0
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,715评论 0 8
  • 今天上午与我妈视频,说到这几天不知道做点什么吃,我妈提醒我说前两天做了黄焖鸡,视频结束马上就去市场买了两个鸡腿,做...
    劼希阅读 433评论 0 1