微信小程序 checkcox 样式修改

引入的样式文件中这样写
checkbox .wx-checkbox-input {
  border-radius: 50% !important;
  /* background-color: #FFFFFF; */
  border: 2rpx solid #828181 !important;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border: 2rpx solid #24c023 !important;
  background-color: #24c023 !important;
  color: #FFFFFF !important;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: #FFFFFF !important;
}

在子组件中的scope 深度作用选择器的写法

原生css 使用  >>>

less 使用  /deep/

sass 使用  :v-deep

/* ifdef MP-WEIXIN */
/*checkbox 选项框大小  */
>>> checkbox .wx-checkbox-input {
  border-radius: 50% !important;
  /* background-color: #FFFFFF; */
  border: 2rpx solid #828181 !important;
}
/*checkbox选中后样式  */
>>> checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border: 2rpx solid #24c023 !important;
  background-color: #24c023 !important;
  color: #FFFFFF !important;
}
/*checkbox选中后图标样式  */
>>> checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: #FFFFFF !important;
}
/* endif */

#ifdef开头，以 #endif 结尾

#ifdef H5 || MP-WEIXIN#endif