uniapp 复选框 checkbox-group 形状、对勾大小更改

星星散落人间

已于 2024-03-06 13:38:15 修改

阅读量1.2k

点赞数 1

文章标签： uni-app 前端 javascript 1024程序员节

于 2023-10-23 00:00:37 首次发布

本文链接：https://blog.csdn.net/future_1_/article/details/133980430

版权

代码部分：

// 复选框形状 
>>>checkbox .wx-checkbox-input {
        // 复选框中对号的位置的更改
        margin-right：8rpx;
        width: 32rpx;
        height: 32rpx;
        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;
    }


// 复选框对勾大小、位置
radio::before,
checkbox::before {
	font-family: "cuIcon";
	content: "\e645"; // 对勾，在此可更改图标，为空则无图标
	position: absolute;
	color: #ffffff !important;
	top: 50%;
	margin-top: -8px;
	margin-left: 7rpx;
	font-size: 24rpx;
	line-height: 32rpx;
	pointer-events: none;
	transform: scale(1, 1);
	transition: all 0.3s ease-in-out 0s;
	z-index: 9;
}