uni-app 把checkbox修改样式为圆形,并修改选中颜色及选中图标

210 阅读 0 评论 139 点赞

我是靠谱客的博主优美背包，这篇文章主要介绍uni-app 把checkbox修改样式为圆形,并修改选中颜色及选中图标，现在分享给大家，希望可以做个参考。

实现：

<style scoped>
/* 复选框未选中前的样式 */
/deep/ .uni-checkbox-input {
width: 36upx;
height: 36upx;
border-radius: 50%;
margin-right: 0;
border: 1px solid #888888;
}
/* 复选框取消默认样式 */
/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
font: normal normal normal 14px/1 uni;
content: "EA08";
font-size: 0; /* 重点使用这一步取消的默认样式 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-48%) scale(1);
-webkit-transform: translate(-50%,-48%) scale(1);
}
/* 重新定义复选框选中后的样式*/
/deep/ .uni-checkbox-input-checked::before {
width: 19px;
height: 19px;
background: #ff0000;
border-radius: 50%;
/* background: url(../../static/img/seal.png) no-repeat center; */ //选中图标
}
</style>