uniapp checkbox的样式不同平台不同的显示，app端改不了样式

分类：uni-app

uniapp

uniapp的checkbox标签属性直接设置不了，就使用.checkbox类,现在h5和小程序都能圆角白勾，app内为框蓝勾，改checkbox本身也不行
.checkbox .uni-checkbox-input{
border: 1px solid #9a9a9a;
border-radius: 50%;/ 圆角 /
width: 40rpx; / 背景的宽 /
height: 40rpx; / 背景的高 /
box-sizing:border-box;
}
/ 选中后的背景样式（红色背景无边框可根据UI需求自己修改） /
.checkbox .uni-checkbox-input.uni-checkbox-input-checked{
border: none;
background: #32953b;
}
/ 选中后的对勾样式（白色对勾可根据UI需求自己修改） /
.checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{
border-radius: 50%;/ 圆角 /
width: 40rpx;/ 选中后对勾大小，不要超过背景的尺寸 /
height: 40rpx;/ 选中后对勾大小，不要超过背景的尺寸 /
line-height: 40rpx;
text-align: center;
font-size: 24rpx; / 对勾大小 30rpx /
color:#fff; / 对勾颜色白色 /
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}

2018-12-20 17:44 负责人:无分享

6 个回复

ytmffkdx

/ #ifdef APP-PLUS || MP-WEIXIN /
checkbox .wx-checkbox-input {
border-radius: 50%;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {  
    border: 1px solid #ff4500;  
    background: #ff4500;  
    color: #fff !important;  
}  

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {  
    font-size: 18px;  
}  

/* #endif */