近期，在使用uniapp做项目，发现在使用checkbox/checkbox-group的时候，复选框无法选中，并且无法多选。

最后排查下来是因为是项目中使用了colorui的缘故。

是colorui的main.css中，定义的css和uniapp冲突了。具体冲突的代码如下，直接删掉或注释掉既可。当然你有更好的方法的话也欢迎留言。

/* ==================
         开关
 ==================== */
switch,
checkbox,
radio {
position: relative;
}
switch::after,
switch::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: #ffffff !important;
top: 0%;
left: 0upx;
font-size: 26upx;
line-height: 26px;
width: 50%;
text-align: center;
pointer-events: none;
transform: scale(0, 0);
transition: all 0.3s ease-in-out 0s;
z-index: 9;
bottom: 0;
height: 26px;
margin: auto;
}
switch::before {
content: "\e646";
right: 0;
transform: scale(1, 1);
left: auto;
}
switch[checked]::after,
switch.checked::after {
transform: scale(1, 1);
}
switch[checked]::before,
switch.checked::before {
transform: scale(0, 0);
}
/* #ifndef MP-ALIPAY */
radio::before,
checkbox::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: #ffffff !important;
top: 50%;
margin-top: -8px;
right: 5px;
font-size: 32upx;
line-height: 16px;
pointer-events: none;
transform: scale(1, 1);
transition: all 0.3s ease-in-out 0s;
z-index: 9;
}
radio .wx-radio-input,
checkbox .wx-checkbox-input,
radio .uni-radio-input,
checkbox .uni-checkbox-input {
margin: 0;
width: 24px;
height: 24px;
}
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
border-radius: 100upx;
}
/* #endif */
switch[checked]::before {
transform: scale(0, 0);
}
switch .wx-switch-input,
switch .uni-switch-input {
border: none;
padding: 0 24px;
width: 48px;
height: 26px;
margin: 0;
border-radius: 100upx;
}
switch .wx-switch-input:not([class*="bg-"]),
switch .uni-switch-input:not([class*="bg-"]) {
background: #8799a3 !important;
}
switch .wx-switch-input::after,
switch .uni-switch-input::after {
margin: auto;
width: 26px;
height: 26px;
border-radius: 100upx;
left: 0upx;
top: 0upx;
bottom: 0upx;
position: absolute;
transform: scale(0.9, 0.9);
transition: all 0.1s ease-in-out 0s;
}
switch .wx-switch-input.wx-switch-input-checked::after,
switch .uni-switch-input.uni-switch-input-checked::after {
margin: auto;
left: 22px;
box-shadow: none;
transform: scale(0.9, 0.9);
}
radio-group {
display: inline-block;
}
switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before,
switch.radius .uni-switch-input::after,
switch.radius .uni-switch-input,
switch.radius .uni-switch-input::before {
border-radius: 10upx;
}
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;
}
radio.radio[checked]::after,
radio.radio .uni-radio-input-checked::after {
content: "";
background-color: transparent;
display: block;
position: absolute;
width: 8px;
height: 8px;
z-index: 999;
top: 0upx;
left: 0upx;
right: 0;
bottom: 0;
margin: auto;
border-radius: 200upx;
/* #ifndef MP */
border: 7px solid #ffffff !important;
/* #endif */
/* #ifdef MP */
border: 8px solid #ffffff !important;
/* #endif */
}
.switch-sex::after {
content: "\e71c";
}
.switch-sex::before {
content: "\e71a";
}
.switch-sex .wx-switch-input,
.switch-sex .uni-switch-input {
background: #e54d42 !important;
border-color: #e54d42 !important;
}
.switch-sex[checked] .wx-switch-input,
.switch-sex.checked .uni-switch-input {
background: #0081ff !important;
border-color: #0081ff !important;
}
switch.red[checked] .wx-switch-input.wx-switch-input-checked,
checkbox.red[checked] .wx-checkbox-input,
radio.red[checked] .wx-radio-input,
switch.red.checked .uni-switch-input.uni-switch-input-checked,
checkbox.red.checked .uni-checkbox-input,
radio.red.checked .uni-radio-input {
background-color: #e54d42 !important;
border-color: #e54d42 !important;
color: #ffffff !important;
}
switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input,
switch.orange.checked .uni-switch-input,
checkbox.orange.checked .uni-checkbox-input,
radio.orange.checked .uni-radio-input {
background-color: #f37b1d !important;
border-color: #f37b1d !important;
color: #ffffff !important;
}
switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input,
switch.yellow.checked .uni-switch-input,
checkbox.yellow.checked .uni-checkbox-input,
radio.yellow.checked .uni-radio-input {
background-color: #fbbd08 !important;
border-color: #fbbd08 !important;
color: #333333 !important;
}
switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input,
radio.olive[checked] .wx-radio-input,
switch.olive.checked .uni-switch-input,
checkbox.olive.checked .uni-checkbox-input,
radio.olive.checked .uni-radio-input {
background-color: #8dc63f !important;
border-color: #8dc63f !important;
color: #ffffff !important;
}
switch.green[checked] .wx-switch-input,
switch[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input,
radio[checked] .wx-radio-input,
switch.green.checked .uni-switch-input,
switch.checked .uni-switch-input,
checkbox.green.checked .uni-checkbox-input,
checkbox.checked .uni-checkbox-input,
radio.green.checked .uni-radio-input,
radio.checked .uni-radio-input {
background-color: #39b54a !important;
border-color: #39b54a !important;
color: #ffffff !important;
border-color: #39B54A !important;
}
switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input,
radio.cyan[checked] .wx-radio-input,
switch.cyan.checked .uni-switch-input,
checkbox.cyan.checked .uni-checkbox-input,
radio.cyan.checked .uni-radio-input {
background-color: #1cbbb4 !important;
border-color: #1cbbb4 !important;
color: #ffffff !important;
}
switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input,
radio.blue[checked] .wx-radio-input,
switch.blue.checked .uni-switch-input,
checkbox.blue.checked .uni-checkbox-input,
radio.blue.checked .uni-radio-input {
background-color: #0081ff !important;
border-color: #0081ff !important;
color: #ffffff !important;
}
switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input,
switch.purple.checked .uni-switch-input,
checkbox.purple.checked .uni-checkbox-input,
radio.purple.checked .uni-radio-input {
background-color: #6739b6 !important;
border-color: #6739b6 !important;
color: #ffffff !important;
}
switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input,
radio.mauve[checked] .wx-radio-input,
switch.mauve.checked .uni-switch-input,
checkbox.mauve.checked .uni-checkbox-input,
radio.mauve.checked .uni-radio-input {
background-color: #9c26b0 !important;
border-color: #9c26b0 !important;
color: #ffffff !important;
}
switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input,
radio.pink[checked] .wx-radio-input,
switch.pink.checked .uni-switch-input,
checkbox.pink.checked .uni-checkbox-input,
radio.pink.checked .uni-radio-input {
background-color: #e03997 !important;
border-color: #e03997 !important;
color: #ffffff !important;
}
switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input,
radio.brown[checked] .wx-radio-input,
switch.brown.checked .uni-switch-input,
checkbox.brown.checked .uni-checkbox-input,
radio.brown.checked .uni-radio-input {
background-color: #a5673f !important;
border-color: #a5673f !important;
color: #ffffff !important;
}
switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input,
radio.grey[checked] .wx-radio-input,
switch.grey.checked .uni-switch-input,
checkbox.grey.checked .uni-checkbox-input,
radio.grey.checked .uni-radio-input {
background-color: #8799a3 !important;
border-color: #8799a3 !important;
color: #ffffff !important;
}
switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input,
radio.gray[checked] .wx-radio-input,
switch.gray.checked .uni-switch-input,
checkbox.gray.checked .uni-checkbox-input,
radio.gray.checked .uni-radio-input {
background-color: #f0f0f0 !important;
border-color: #f0f0f0 !important;
color: #333333 !important;
}
switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input,
radio.black[checked] .wx-radio-input,
switch.black.checked .uni-switch-input,
checkbox.black.checked .uni-checkbox-input,
radio.black.checked .uni-radio-input {
background-color: #333333 !important;
border-color: #333333 !important;
color: #ffffff !important;
}
switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input,
radio.white[checked] .wx-radio-input,
switch.white.checked .uni-switch-input,
checkbox.white.checked .uni-checkbox-input,
radio.white.checked .uni-radio-input {
background-color: #ffffff !important;
border-color: #ffffff !important;
color: #333333 !important;
}