html
<checkbox color="#FFFFFF" />
微信小程序css
>>>checkbox .wx-checkbox-input {
border-radius: 50% !important;
border: 2rpx solid #828181 !important;
}
>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border: 2rpx solid #0c3ca8 !important;
background-color: #0c3ca8 !important;
color: #FFFFFF !important;
}
>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
color: #FFFFFF !important;
}
H5 css
>>>uni-checkbox .uni-checkbox-input {
margin-right: 0;
border-radius: 50%;
border: 2rpx solid #828181;
}
/* 取消选中后的样式 */
>>>uni-checkbox .uni-checkbox-input:empty {
border: 2rpx solid #828181;
background-color: #5FFFFFF;
opacity: 0.5;
}
/* 选中时的样式 */
>>>uni-checkbox .uni-checkbox-input:not(:empty) {
border: 2rpx solid #0c3ca8;
background-color: #0c3ca8;
color: #FFFFFF;
}
网友评论