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

标签：checkbox 微信 h5 radio input uni border before

由于引用了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; }

标签：checkbox,微信,h5,radio,input,uni,border,before
From： https://www.cnblogs.com/yuejucai/p/17046089.html