Customize Checkboxes And Radio Buttons With CSS3

[netcat-na-diary]

Customize Checkboxes And Radio Buttons With CSS3

www.hongkiat.com/blog/css3-checkbox-radio/

HTML

<div class="radio">  
						<input id="male" type="radio" name="gender" value="male">  
						<label class="radio-label" for="male">Мужчина</label>  
						<input id="female" type="radio" name="gender" value="female">  
						<label class="radio-label" for="female">Женщина</label>  
						<input id="other" type="radio" name="gender" value="other">  
						<label class="radio-label" for="other">Другое</label>  
					</div> 

LESS

.radio-label {  
		display: inline-block;  
		cursor: pointer;  
		position: relative;  
		padding-left: 25  
		margin-right: 15  
		font-size: 13 
		font-size: 14
		color: #909090;
		line-height: 1.7;
		
		&:before {  
			content: "";  
			display: inline-block;  		  
			width: 10  
			height: 10  		  
			margin-right: 12  
			position: absolute;  
			left: 0;  
			bottom: 5  
			background: #fff;
			border: 2px solid #bbe2f4;
			.border-radius(50%);
		} 

		&:after {  
			content: "";  
			display: inline-block;  		  
			width: 6  
			height: 6  		  
			margin-right: 12  
			position: absolute;  
			left: 4  
			bottom: 9  
			background: transparent;
			.border-radius(50%); 
			.transition(0.2s);
		}  	
		
		&:hover {
			&:after {  
				background: #bbe2f4;
			}  
		}
	} 

	input[type=radio] {  
		display: none;  
		
		&:checked + .radio-label:after {  
			content: "";  
			display: inline-block;  		  
			width: 6  
			height: 6  		  
			margin-right: 12  
			position: absolute;  
			left: 4  
			bottom: 9  
			background: #8ac7e5;
			.border-radius(50%); 
		}    
	}

CSS

.radio-label {
  position: relative;
  display: inline-block;
  padding-left: 25
  margin-right: 15
  font-size: 13
  font-size: 14
  line-height: 1.7;
  color: #909090;
  cursor: pointer;
}

.radio-label:before {
  position: absolute;
  bottom: 5
  left: 0;
  display: inline-block;
  width: 10
  height: 10
  margin-right: 12
  background: #fff;
  border: 2px solid #bbe2f4;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: "";
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.radio-label:after {
  position: absolute;
  bottom: 9
  left: 4
  display: inline-block;
  width: 6
  height: 6
  margin-right: 12
  background: transparent;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: "";
  -webkit-transition: 0.2s;
     -moz-transition: 0.2s;
      -ms-transition: 0.2s;
       -o-transition: 0.2s;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.radio-label:hover:after {
  background: #bbe2f4;
}

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

input[type=radio]:checked + .radio-label:after {
  position: absolute;
  bottom: 9
  left: 4
  display: inline-block;
  width: 6
  height: 6
  margin-right: 12
  background: #8ac7e5;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: "";
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

http://codepen.io/Heidel/pen/KwJJor

+ ссылка
http://css-blog.ru/styling-checkbox-and-radio

LESS

/* radio */
.radio-label {  
	display: inline-block;  
	cursor: pointer;  
	position: relative;  
	padding-left: 22  
	margin-right: 15  
	font-size: 14
	color: @gray;
	line-height: 1.5;
	
	&:before {  
		content: "";  
		display: inline-block;  		  
		width: 14  
		height: 14  		  
		margin-right: 12  
		position: absolute;  
		left: 0;  
		top: 50%; 
		margin-top: -8 
		background: #fff;
		border: 1px solid #ccc;
		border-radius:50%;
	} 

	&:after {  
		content: "";  
		display: inline-block;  		  
		width: 8  
		height: 8  		  
		margin-right: 12  
		position: absolute;  
		left: 3  
		top: 6  
		background: transparent;
		border-radius:50%; 
	}  	
} 

input[type=radio] {  
	display: none;  
	
	&:checked + .radio-label:after {   
		background: @orange;
	}    
}

/* checkbox */
.checkbox-label {  
	display: inline-block;  
	cursor: pointer;  
	position: relative;  
	padding-left: 22  
	margin-right: 15  
	font-size: 14
	color: @gray;
	line-height: 1.5;
	
	&:before {  
		content: "";  
		display: inline-block;  		  
		width: 14  
		height: 14  		  
		margin-right: 12  
		position: absolute;  
		left: 0;  
		top: 50%; 
		margin-top: -8 
		background: #fff;
		border: 1px solid #ccc;
	} 

	&:after {  
		content: "";  
		display: inline-block;  		  
		width: 8  
		height: 8  		  
		margin-right: 12  
		position: absolute;  
		left: 3  
		top: 6  
		background: transparent;
	}  	
} 

input[type=checkbox] {  
	display: none;  
	
	&:checked + .checkbox-label:after {  
		background: @orange;
	}    
}