自定义复选框和单选框

html代码

<div class="checkbox">
	<input type="checkbox" id="enable" name="enable" value="1" >
    <label for="enable" >无牌车输出品牌</label>
</div>

css代码

/*自定义多选框*/

.checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	outline: none;
}

.checkbox input[type="checkbox"] {
	display: none;
}

.checkbox input[type="checkbox"]+label {
	display: flex;
	cursor: pointer;
	color: #888888;
	padding: 2px 2px;
	line-height: 16Px;
	background: #FFFFFF;
}

.checkbox label::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #ffffff;
	vertical-align: middle;
	margin-right: 8px;
	border: 1px solid #C6CACF;
	border-radius: 4px;
	border-image: initial;
	-webkit-box-sizing: border-box;
}

.checkbox input[type="checkbox"][disabled='disabled']+label::before {
	position: relative;
	width: 16px;
	height: 16px;
	border-color: #E4E9EE;
	color: #BBBBBB;
}

.checkbox input[type="checkbox"]:checked+label::before {
	position: relative;
	width: 16px;
	height: 16px;
	border-color: #4FB1F7;
	background-color: RGB(79, 177, 247);
	/*background-image: url(../static/images/gou.png);*/
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1YWUxNTk4My1jZjg4LTBjNDAtOGViZC03NjcxNWVjM2I4OWQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTI2QzNDN0M2QUVBMTFFODg3NDVENDZENzFFQzZDNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTI2QzNDN0I2QUVBMTFFODg3NDVENDZENzFFQzZDNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ2N2Y3N2E5LTEyZDUtM2I0YS1hZTIwLTZlNDg0ZTExNWUyMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1YWUxNTk4My1jZjg4LTBjNDAtOGViZC03NjcxNWVjM2I4OWQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62q2/sAAAAc0lEQVR42mL8//8/AyWAiYFCMMIMYATiqUD8EkUUFAtEYEYgnv4fAqYhy6ErnAjEDng0T4fycRpwC4i/AbETFs1L0TVjM0AGiO9ADXFG08yMzXvY/CsPxE+A+B8hzbgMAGEVIH4ExIvwaQZhxtG8wAAQYAD+Tjm52jzA+gAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.checkbox input[type="checkbox"][disabled='disabled']+label,
.checkbox input[type="checkbox"][disabled='disabled']:checked+label {
	color: #BBBBBB
}

.checkbox input[type="checkbox"][disabled='disabled']:checked+label::before {
	position: relative;
	width: 16px;
	height: 16px;
	border-color: #E4E9EE;
	background-color: #dce0e4;
	/*background-image: url(../static/images/gou.png);*/
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1YWUxNTk4My1jZjg4LTBjNDAtOGViZC03NjcxNWVjM2I4OWQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTI2QzNDN0M2QUVBMTFFODg3NDVENDZENzFFQzZDNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTI2QzNDN0I2QUVBMTFFODg3NDVENDZENzFFQzZDNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ2N2Y3N2E5LTEyZDUtM2I0YS1hZTIwLTZlNDg0ZTExNWUyMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1YWUxNTk4My1jZjg4LTBjNDAtOGViZC03NjcxNWVjM2I4OWQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62q2/sAAAAc0lEQVR42mL8//8/AyWAiYFCMMIMYATiqUD8EkUUFAtEYEYgnv4fAqYhy6ErnAjEDng0T4fycRpwC4i/AbETFs1L0TVjM0AGiO9ADXFG08yMzXvY/CsPxE+A+B8hzbgMAGEVIH4ExIvwaQZhxtG8wAAQYAD+Tjm52jzA+gAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.checkbox {
	display: inline-block;
	vertical-align: middle;
}

自定义单选框

html

<div class="radio  text-bottom radio-r55">
	<input id="Jing_mode1" type="radio" class="cgi_data" name="Jing_mode" v-model="black_whitelist.Jing_mode" value="0"  >
	<label for="Jing_mode1" v-text="lang.bl.buguanlian">不关联开闸</label>
</div>
<div class="radio text-bottom radio-r55">
	<input id="Jing_mode2" type="radio" class="cgi_data" v-model="black_whitelist.Jing_mode" name="Jing_mode" value="1" >
	<label for="Jing_mode2" v-text="lang.bl.shishiguanglian">实时关联开闸</label>
</div>

css

/*自定义单选框*/

.radio input[type="radio"] {
	-webkit-appearance: none;
	outline: none;
}

.radio input[type="radio"] {
	display: none;
}

.radio input[type="radio"]+label {
	cursor: pointer;
	color: #888888;
	padding: 2px 2px;
	line-height: 16Px;
	background: #FFFFFF;
	vertical-align: bottom;
}

.radio label::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #ffffff;
	vertical-align: middle;
	margin-right: 8px;
	border: 1px solid #C6CACF;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
}

.radio input[type="radio"][disabled='disabled']+label::before {
	position: relative;
	width: 16px;
	height: 16px;
	border-color: #E4E9EE;
	color: #BBBBBB;
}

.radio input[type="radio"]:checked+label::before {
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid #4FB1F7;
	background: #FFFFFF;
	background-color: RGB(79, 177, 247);
	/*background-image: url(../static/images/dian.png);*/
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphYWU1OWM5Yy0yMjBhLTE2NDctOTgwNC0yZTYzNjA4MTIyNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OURBNUNCRjg2RkFFMTFFODgzOEZCQTM4Q0Q3RENFOUIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OURBNUNCRjc2RkFFMTFFODgzOEZCQTM4Q0Q3RENFOUIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmQ3NjBjMGU0LTk0MDUtNDA0My05YmJiLWE2YTY4YjBmMTAyNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphYWU1OWM5Yy0yMjBhLTE2NDctOTgwNC0yZTYzNjA4MTIyNzkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4dXjZIAAABQUlEQVR42mL03/idAQ1oAXEKEHsCsSJU7B4Q7wDiOUB8DVkxExKbDYinAPFlIC4EYg0gZodiTagYSG4GEHPCNLEgad4KxC4M+AHIwnQgVoW68BfMBf1EaEYGTkDcBzNRG2oqqSADpJcFGmDMyDIsQGMTtFgZHGSADEYGhgOP/zEsuPab4c8/FANAelJABnigGx0P1OyjhDATxP717z/Domt/0JV6gLyghC7qKMOE4V43OWZs3lBiYqAMgGPhHrro/if/MFTufvQXmwEPWaApTANZdCEwwIBhx+AgC3EgKBCX3viDzYA9jMCkrANkXECPCSIAyEkGICuuAPFMMvwP0nMFFoigdL6HBM37oHrgmekXEHsD8VQg/odH4z+ozT5QPSi5ESSQA8R6QDwRiG8C8W8g/grEV6Fi+tAkDC8DAAIMAOLFSYeL0fRpAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.radio input[type="radio"][disabled='disabled']+label,
.radio input[type="radio"][disabled='disabled']:checked+label {
	color: #BBBBBB;
	border: none;
}

.radio input[type="radio"][disabled='disabled']:checked+label::before {
	position: relative;
	width: 16px;
	height: 16px;
	border: none;
	background: #FFFFFF;
	/*background-image: url(../static/images/diandis.png);*/
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphYWU1OWM5Yy0yMjBhLTE2NDctOTgwNC0yZTYzNjA4MTIyNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTFBQUU4N0M2RkIxMTFFOEE4OUJENUVDMjIxMTBFOUMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTFBQUU4N0I2RkIxMTFFOEE4OUJENUVDMjIxMTBFOUMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1MTM1ZjM4LTliMTUtNzE0Yy1iYTNiLTQxODQzNGFhMmRiYSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphYWU1OWM5Yy0yMjBhLTE2NDctOTgwNC0yZTYzNjA4MTIyNzkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5+VrY7AAABLElEQVR42mK8c/8JAxrQAuIUIPYEYkWo2D0g3gHEc4D4GrJiRiQD2IC4D4gzgZiJATv4B8SzgbgQiL+DBFiQNG8FYhcG/ABkcDoQq0Jd+AtmUz8RmpGBE9S1YC9oA+mLQMzMQBr4C8T6LNAAQ9HMyMjIICzIx8DLwwXmf/7yjeHt+08MR1YG0pMCMsAD3WiQZn4+HjgfxAZpBhmCBjxAYaCELgqzGRnw8XJj84YSEwNlABwL99BFQX5GB58+f8NmwEMmaApDASC/fvz0heHfv39gDGK/+/AJmwF7QNGoA2RcIDMaDUAuuALEM8nwP0jPFVgggtL2HhI074PqgWeaX0DsDcRToRmGAU9mAtnsA9WDkhthAJS0U6EJTAmq8AHUhXOgXoYDgAADAJw/WlENaiPkAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.radio {
	display: inline-block;
	vertical-align: middle;
}