radio以及checkbox默认样式不符合自身需求时,根据自身需求更改样式,以下是自身的示例:
单选:
多选:
由于uniapp自身包含了一套默认的样式,所以如果不想全局更改只想在某个单据页面使用的话,就要考虑CSS优先级的问题,以下为具体样式,给大家做一个参考:(我这边可能会麻烦一点,大家按照自身需求删减哈)
单选框CSS:
/* radio 边框颜色 */
/deep/ uni-radio .uni-radio-input{
width: 30rpx;
height: 30rpx;
border:2rpx solid rgba(166, 175, 255, 0.5)!important;
transform: rotateZ(360deg); //防止IOS出现一侧边框缺失的问题
background-color: rgba(255, 255, 255, 0)!important;
margin-right:0rpx!important; //uniapp 默认右侧会有一定的margin,大家根据自身需求去除
}
/* radio 选中后的边框颜色 */
/deep/ uni-radio .uni-radio-input-checked {
border:2rpx solid #CACFFF!important;
transform: rotateZ(360deg);
background-color: #556FFE!important;
display:flex;
align-items: center;
justify-content: center;
}
/* radio 选中后的图标样式*/
/deep/ uni-radio .uni-radio-input.uni-radio-input-checked::before{
display: block;
content: ""!important;
width:20rpx!important;
height:20rpx!important;
text-align:center;
background:#fff!important;
border-radius:20rpx!important;
}
多选框CSS:
/deep/ uni-checkbox .uni-checkbox-input{
width: 30rpx;
height: 30rpx;
border-radius: 8rpx;
border: 2rpx solid #5262E8;
transform: rotateZ(360deg);
background-color: rgba(255, 255, 255, 0)!important;
pointer-events: none;
}
/deep/ uni-checkbox .uni-checkbox-input-checked{
border:2rpx solid #CACFFF!important;
transform: rotateZ(360deg);
background-color: #556FFE!important;
}
/deep/ uni-checkbox .uni-checkbox-input-checked::before{
font-size: 12px!important;
font-weight:bold;
color:#fff;
}