【uniapp】样式合集

1、修改uni-data-checkbox多选框的样式为单选框的样式

 

我原先是用的单选，但是单选并不支持选中后，再次点击取消选中；所以我改成了多选，然后改变多选样式，让他看起来像单选 

 在所在使用的页面上修改样式即可

					
						
						我已阅读并同意
							《用户协议》
							《隐私协议》
						
					
				

2、修改checkbox的样式

 

					
						
						我已阅读并同意
							《用户协议》及
							《隐私协议》
						
					
				

 样式必须得写在app.vue中

.login_container {
		//自定义checkbox的样式（ 元素使用的时候就是使用类名：checkbox ）
		checkbox.checkbox .wx-checkbox-input,
		checkbox.checkbox .uni-checkbox-input {
			border-radius: 8px !important;
			display: flex;
			flex-shrink: 0;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 16px;
			height: 16px;
			border: 1px solid #DCDFE6;
			border-radius: 16px;
			background-color: #fff !important;
			z-index: 1;
		}

		// 选中后的 对勾样式 
		checkbox.checkbox .uni-checkbox-input-checked::before,
		checkbox.checkbox .wx-checkbox-input-checked::before {
			width: 8px;
			height: 8px;
			border-radius: 10px !important;
			line-height: 20px;
			text-align: center;
			font-size: 18px;
			color: #fff;
			background: #2979ff;
			transform: translate(-70%, -50%) scale(1);
			-webkit-transform: translate(-70%, -50%) scale(1);
			position: absolute;
			top: 7px !important;
			left: 9px !important;
			border: 0px solid #2979ff !important;
		}
	}