在h5和微信小程序中修改uni-app的checkbox、radia的样式

由于引用了colorUI导致checbox的样式修改无效，因为colorUI的原因导致checkbox .uni-checkbox-input::before不显示。colorUI的main.css：

switch .wx-switch-input::before,  
radio.radio::before,  
checkbox .wx-checkbox-input::before,  
radio .wx-radio-input::before,  
switch .uni-switch-input::before,  
radio.radio::before,  
checkbox .uni-checkbox-input::before,  
radio .uni-radio-input::before {  
    display: none;  
}

解决方案：在APP.vue中写样式覆盖掉colorUI，如下：

H5:

//选框大小和样式

uni-checkbox .uni-checkbox-input {

  border-radius: 50%;

  width: 32rpx;

  height: 32rpx;

  border: 2rpx solid #cccccc;

}

// 选中背景样式

uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {

  border: 2rpx solid #cccccc;

  border-color: #fd4118;

  background: -webkit-linear-gradient(#fd4118, #ff851d);

}

// 选中图标样式

uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {

  font-size: 28rpx;

  color: #fff;

}

 

小程序：

因为在小程序调试工具上，CheckBox的审查结果是黑盒，实际渲染出来的类名如下（不要怀疑）：

checkbox .wx-checkbox-input{

  border-radius: 50%;

  width: 32rpx;

  height: 32rpx;

  border: 2rpx solid #cccccc;

}

// 选中样式

checkbox .wx-checkbox-input.wx-checkbox-input-checked {

  border: 2rpx solid #cccccc;

  border-color: #fd4118;

  background: -webkit-linear-gradient(#fd4118, #ff851d);

}

// 选中图标样式

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {

  font-size: 28rpx;

  color: #fff;

}