Стилизуем checkbox и radio элементы

Пример того как мной осуществлено это на сайте RusWool. У нас есть фильтр с чекбоксами и радио элементами.

Для стилизации этих элементов используем CSS.

CSS

.searchandfilter input.sf-input-checkbox ~ label::before {
	position: absolute;
	left: -4px;
    top: 0;
	content: '\2714';  
	text-align: center;
	color: #ffffff;
	line-height: 1em;
	width: 17px;
    height: 17px;
	background-color: #ffffff;
    border: 2px solid #baa063;
	border-radius: 0.25em;
	margin: 0.25em;
	display: inline-block;}
.searchandfilter input.sf-input-checkbox:checked ~ label::before {
	color: #000000;}

.searchandfilter input.sf-input-radio ~ label::before {
	position: absolute;
	left: -4px;
    top: 0;
	content: '';  
	text-align: center;
	color: #ffffff;
	line-height: 1em;
	width: 17px;
    height: 17px;
	background-color: #ffffff;
    border: 2px solid #baa063;
	border-radius: 50%;
	margin: 0.25em;
	display: inline-block;}
.searchandfilter input.sf-input-radio:checked ~ label::before {
	border: 4px solid #baa063;
	background-color: #000000;}

Можно так же воспользоваться этим кодом "background: url(/checkbox-1.png) 0 0 no-repeat;" вместо "background-color: #000000;".