uni-app - 更改默认 checkbox 组件样式（变为实心圆/更改√对号大小等）

男娘i 2022-12-28 11:23 741阅读 0赞

## 前言 ##

> 组件文档：[https://uniapp.dcloud.io/component/checkbox][https_uniapp.dcloud.io_component_checkbox]

`checkbox` 组件默认样式很难看，但大部分样式写法都覆盖不掉。  
![在这里插入图片描述][20201216202427527.png]

## 解决方案 ##

> 注意：请将以下代码放置在 `app.vue` 中，否则更改可能无效，也不要在 `style` 中增加 `scoped` 属性。

根据你的需求，可在以下代码中进行修改即可。  
![在这里插入图片描述][20201216202713867.png]

uni-checkbox-group{  width: 100% !important; }
    uni-checkbox-group uni-label{  width: 33% !important; display: inline-flex; margin-bottom: 20rpx; }
    
    /*checkbox 选项框大小 */
    uni-checkbox .uni-checkbox-input{ 
    	width: 30rpx !important;
    	height: 30rpx !important;
    }
    
    /*checkbox选中后样式 */
    uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{ 
    	background: #3D7EFF;
    	border-color:#3D7EFF;
    }
    
    /*checkbox选中后图标样式 */
    uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{ 
        width: 20rpx;
        height: 20rpx;  
    	line-height: 20rpx;
    	text-align: center;
    	font-size: 18rpx;
    	color: #fff;
    	background: transparent;
    	transform: translate(-70%, -50%) scale(1);
    	-webkit-transform: translate(-70%, -50%) scale(1);
    }

[https_uniapp.dcloud.io_component_checkbox]: https://uniapp.dcloud.io/component/checkbox
[20201216202427527.png]: /images/20221120/09eb7e3f34e2450b8412e451e800aec6.png
[20201216202713867.png]: /images/20221120/475325d34cce490dbfbc3f0e5762c547.png