微信小程序查看官方樣式及修改checkbox樣式為圓圈

小程序中checkbox的樣式是正方形的，設計圖上給的是一個圓圈，在查看官方demo的時候發現了怎么修改的

1. 首先在微信官方文檔上找到復選框的demo

2. 然后審查代碼找到復選框的樣式部分

可以看到選中的復選框的class為wx-checkout-input

選中的樣式為wx-checkbox-input-checked

3. 這樣我們就可以自己修改樣式了

先弄成圓圈：

	<checkbox class="interestthreecheckbox" value="{{item.id}}"/>

.interestthreecheckbox .wx-checkbox-input {
  border-radius: 50%;
  width: 35rpx;
  height: 35rpx;
}

還可以設置選中的背景顏色

.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked{
  background: lightblue;
  border: 1px solid lightblue;
}

也可以修改對勾的顏色大小

對勾默認的樣式：

wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {
    font: normal normal normal 14px/1 "weui";
    content: "\EA08";
    font-size: 22px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.73);
    -webkit-transform: translate(-50%, -48%) scale(0.73);

修改的樣式

.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  width: 40rpx;/* 選中后對勾大小 */
  height: 40rpx;/* 選中后對勾大小 */
  font-size:80rpx; /* 對勾大小30rpx */
  color:blue; /* 對勾顏色 白色 */
}