微信小程序checkbox样式修改

2018-04-06  本文已影响8025人  ZZES_ZCDC

参考自:https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=1170421356&docid=0004267318cca8bded865917051004

1.checkbox样式修改

/*checkbox 整体大小  */
checkbox {
  width: 240rpx;
  height: 90rpx;
}
/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 50rpx;
  height: 50rpx;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #FF525C;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
修改前 修改后
上一篇下一篇

猜你喜欢

热点阅读