css3radios-scss

css3radios.scss

.css3-radios {
	label {
		display: inline-block;
		vertical-align: middle;
	}
	input[type="radio"] + span {
		display: inline-block;
		vertical-align: middle;
		&::before {
			display: inline-block;
			vertical-align: middle;
		}
	}
}

.css3-checkboxes {
	label {
		display: inline-block;
		vertical-align: middle;
	}
	input[type="checkbox"] + span {
		display: inline-block;
		vertical-align: middle;
		&::before {
			display: inline-block;
			vertical-align: middle;
		}
	}
}

.css3-radios, .css3-checkboxes {
	position: relative;
}

.css3-radios label *, .css3-checkboxes label * {
	cursor: pointer;
}

.css3-radios input[type="radio"], .css3-checkboxes input[type="checkbox"] {
	opacity: 0;
	position: absolute;
}

.css3-radios input[type="radio"] + span, .css3-checkboxes input[type="checkbox"] + span {
	font-size: 12px;
	color: #333;
}

.css3-radios label:hover span::before, .css3-checkboxes label:hover span::before {
	-moz-box-shadow: 0 0 2px #ccc;
	-webkit-box-shadow: 0 0 2px #ccc;
	box-shadow: 0 0 2px #ccc;
}

.css3-radios label:hover span {
	color: #000;
}

.css3-checkboxes {
	label:hover span {
		color: #000;
	}
	input[type="checkbox"] + span::before {
		content: "";
		width: 14px;
		height: 14px;
		margin: -3px 9px 0 0;
		border: solid 1px #000;
		line-height: 14px;
		text-align: center;
		background: #fff;
	}
}

.css3-radios input[type="radio"] {
	+ span::before {
		content: "";
		width: 14px;
		height: 14px;
		margin: 1px 7px 0 0;
		border: solid 1px #000;
		line-height: 14px;
		text-align: center;
		background: #fff;
		float: left;
		border-radius:50%;
	}
	&:checked + span::before {
		color: #666;
	}
}

.css3-checkboxes input[type="checkbox"]:checked + span::before {
	color: #666;
}

.css3-radios input[type="radio"]:disabled + span {
	cursor: default;
	-moz-opacity: .4;
	-webkit-opacity: .4;
	opacity: .4;
}

.css3-checkboxes input[type="checkbox"] {
	&:disabled + span {
		cursor: default;
		-moz-opacity: .4;
		-webkit-opacity: .4;
		opacity: .4;
	}
	+ span::before {
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
	}
}

.css3-radios input[type="radio"]:checked + span::before {
	background-color: #000;
	font-size: 16px;
	line-height: 10px;
}

.css3-checkboxes input[type="checkbox"]:checked + span::before {
	background-color: #000;
	font-size: 12px;
}


<div class="css3-radios">
	<div>
		<label>
			<input  type="radio" name="radio" value="1" checked id="">
			<span>Курьерская доставка по Москве</span>
		</label>
	</div>
	<div>
		<label>
			<input  type="radio" name="radio" value="0" id="">
			<span>Курьерская доставка по Москве</span>
		</label>
	</div>
</div>
<div class="css3-checkboxes">
	<div>
		<label>
			<input  type="checkbox" name="" value="1" checked id="">
			<span>Курьерская доставка по Москве</span>
		</label>
	</div>
	<div>
		<label>
			<input  type="checkbox" name="" value="1" id="">
			<span>Курьерская доставка по Москве</span>
		</label>
	</div>
</div>