css自定义单选框、复选框

span.pg-option-item-radio,
span.pg-option-item-checkbox {
	position: relative;
	display: inline-block;
	margin: 3px 0;
	min-width: 100px;
	cursor: default;
	line-height: 1.5;
	padding: 0 5px 0 19px;
	vertical-align: text-top;
}

span.pg-option-item-radio i.option-icon,
span.pg-option-item-checkbox i.checkbox-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #fff;
	position: absolute;
	top: 3px;
	left: 0;
}

span.pg-option-item-radio i.option-icon {
	border: 1px solid #21c6b6;
	border-radius: 50%;
}

span.pg-option-item-radio.active i.option-icon::after,
span.pg-option-item-checkbox.active i.checkbox-icon::after {
	content: "";
	display: block;
	position: absolute;
}

span.pg-option-item-radio.active i.option-icon::after {
	border: 3px solid #21c6b6 !important;
	left: 4px;
	top: 4px;
	height: 0;
	width: 0;
	border-radius: 50%;
}

span.pg-option-item-checkbox i.checkbox-icon {
	border-radius: 2px;
	border: 1px solid #21c6b6;
}

span.pg-option-item-checkbox.active i.checkbox-icon::after {
	height: 6px;
	width: 12px;
	left: 1px;
	top: 3px;
	border-left: 2px solid #21c6b6;
	border-bottom: 2px solid #21c6b6;
	transform: rotate(-45deg);
}

@media print {
	body {
		font-size: 16px;
	}

	span.pg-option-item-radio i.option-icon {
		border: 1px solid #333 !important;
	}

	span.pg-option-item-radio.active i.option-icon::after {
		border: 5px solid #333 !important;
		left: 2px;
		top: 2px;
	}

	span.pg-option-item-checkbox i.checkbox-icon {
		border: 1px solid #333 !important;
		background: #fff !important;
	}

	span.pg-option-item-checkbox.active i.checkbox-icon::after {
		border-color: #333 !important;
	}
}

DOM结构

<div>
	<span class="pg-option-item pg-option-item-radio"><i class="option-icon"></i>1分</span>
	<span class="pg-option-item pg-option-item-radio active"><i class="option-icon"></i>1分</span>
	<span class="pg-option-item-checkbox"><i class="checkbox-icon"></i>爱仕达</span>
	<span class="pg-option-item-checkbox active"><i class="checkbox-icon"></i>爱仕达</span>
</div>