小程序中修改checkbox的样式

效果图：

image.png

1、wxml代码

<checkbox-group bindchange="checkboxChange" class="check">
    <label>
    <checkbox value="true" checked="{{ischecked}}" />      
    <view class='txt-link'><text>同意服务协议及风险提示</text></view>
    </label>
</checkbox-group>

2、css代码

checkbox .wx-checkbox-input {
    width: 24rpx;
    height: 24rpx;
    border: 2rpx solid #ccc;/* 外圈边框，默认灰色，即未选中状态*/
    border-radius: 50%;
    background: none;
    margin-top: -6rpx;
  }
  /*单选按钮选中后内部样式*/
  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    border: 2rpx solid #0394F0 !important;/* 外圈边框，选中状态颜色*/
    background-color: white !important;/* 外圈边框与内圈实心圆间的内容的颜色，不设置就默认是上面的绿色*/
  }
  /*单选按钮选中后内部中心*/
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 50%;
    height: 50%;
    background: #0394F0;/* 内圈实心圆选中状态颜色*/
    border-radius: 50%;
    content: '';/* 隐藏✔️*/
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
  }