如何改变uniapp中checkbox样式

第一步:复制这一段要写在app.vue中才可生效//设置圆角checkbox.round .wx-checkbox-input,checkbox.round .uni-checkbox-input {border-radius: 100upx;}//设置背景色checkbox.red[checked] .wx-checkbox-input,checkbox.red.checked .uni-che

爬楼梯的前端小白

2940人浏览 · 2022-04-14 17:37:35

爬楼梯的前端小白 · 2022-04-14 17:37:35 发布

第一步:复制

这一段要写在app.vue中才可生效

	//设置圆角
	checkbox.round .wx-checkbox-input,
	checkbox.round .uni-checkbox-input {
		border-radius: 100upx;
	}
	 
	//设置背景色
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input{
		background-color: #ffffff !important;   //背景
		border-color: #ffffff !important;   //边框
		color: #2681FB !important;   //对勾
	}

使用:

把类名给checkbox即可 这个red只是类名不是设置的红色! 修改样式在上述代码里改

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^