单选框与复选框（微信小程序笔记）

单选框与复选框（微信小程序笔记）

单选框样式修改

radio .wx-radio-input {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

radio .wx-radio-input.wx-radio-input-checked {
  background-color: #F74C4E!important;
  border-color: #E5EAEE!important;
}

/*radio选中后图标样式  */
radio  .wx-radio-input.wx-radio-input-checked::before {
  width: 20rpx;
  height: 20rpx;
  text-align: center;
  color: #fff;
  /*设置勾勾大小  */
  font-size: 22rpx;
  /*checkbox选中居中图标  */
  line-height: 20rpx;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

复选框样式修改

checkbox .wx-checkbox-input {
  width: 34rpx;
  height: 34rpx;
  border-radius: 50%;
}
/*checkbox选中背景  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #F74C4E;
  border-color: #E5EAEE;
}

/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 20rpx;
  height: 20rpx;
  line-height: 20rpx;
  text-align: center;
  /*设置勾勾大小  */
  font-size: 22rpx;
  color: #fff;
  /*checkbox选中居中图标  */
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}