Checkbox et boutons radios personnalisés en CSS

<!DOCTYPE html>
<html>
<head>
    <title>Checkbox et boutons radios personnalisés en CSS | Par MEZGANI SAID</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Checkbox et boutons radios personnalisés en CSS">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
	<div class="row">
	    <div class="col-lg-12">
			<div class="col-lg-4 col-md-4 col-sm-6">
				<form>
					<h2>1. Customs Checkboxes</h2>
					<div class="form-check">
						<label>
							<input type="checkbox" name="check" checked> <span class="label-text">choix 01</span>
						</label>
					</div>
					<div class="form-check">
						<label>
							<input type="checkbox" name="check"> <span class="label-text">choix 02</span>
						</label>
					</div>
					<div class="form-check">
						<label>
							<input type="checkbox" name="check"> <span class="label-text">choix 03</span>
						</label>
					</div>
					<div class="form-check">
						<label>
							<input type="checkbox" name="check" disabled> <span class="label-text">choix 04</span>
						</label>
					</div>
				</form>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-6">
				<form>
					<h2>2. Customs Radios</h2>
					<div class="form-check">
						<label>
							<input type="radio" name="radio" checked> <span class="label-text">choix 01</span>
						</label>
					</div>
					<div class="form-check">
						<label>
							<input type="radio" name="radio"> <span class="label-text">choix 02</span>
						</label>
					</div>
					<div class="form-check">
						<label>
							<input type="radio" name="radio"> <span class="label-text">choix 03</span>
						</label>
					</div>
					<div class="form-check">
						<label>
							<input type="radio" name="radio" disabled> <span class="label-text">choix 04</span>
						</label>
					</div>
				</form>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-6">
				<form>
					<h2>3.Radios Toggles</h2>
					<div class="form-check">
						<label class="toggle">
							<input type="radio" name="toggle" checked> <span class="label-text">choix 01</span>
						</label>
					</div>
					<div class="form-check">
						<label class="toggle">
							<input type="radio" name="toggle"> <span class="label-text">choix 02</span>
						</label>
					</div>
					<div class="form-check">
						<label class="toggle">
							<input type="radio" name="toggle"> <span class="label-text">choix 03</span>
						</label>
					</div>
					<div class="form-check">
						<label class="toggle">
							<input type="radio" name="toggle" disabled> <span class="label-text">choix 04</span>
						</label>
					</div>
				</form>
			</div>	
		</div>	
	</div>
  </body>
</html>

body{
	padding: 50px;
}

label{
	position: relative;
	cursor: pointer;
	color: #666;
	font-size: 30px;
}

input[type="checkbox"], input[type="radio"]{
	position: absolute;
	right: 9000px;
}

/*Check box*/
input[type="checkbox"] + .label-text:before{
	content: "\f096";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 5px;
}

input[type="checkbox"]:checked + .label-text:before{
	content: "\f14a";
	color: #2980b9;
	animation: effect 250ms ease-in;
}

input[type="checkbox"]:disabled + .label-text{
	color: #aaa;
}

input[type="checkbox"]:disabled + .label-text:before{
	content: "\f0c8";
	color: #ccc;
}

/*Radio box*/

input[type="radio"] + .label-text:before{
	content: "\f10c";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 5px;
}

input[type="radio"]:checked + .label-text:before{
	content: "\f192";
	color: #8e44ad;
	animation: effect 250ms ease-in;
}

input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

input[type="radio"]:disabled + .label-text:before{
	content: "\f111";
	color: #ccc;
}

/*Radio Toggle*/

.toggle input[type="radio"] + .label-text:before{
	content: "\f204";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 10px;
}

.toggle input[type="radio"]:checked + .label-text:before{
	content: "\f205";
	color: #16a085;
	animation: effect 250ms ease-in;
}

.toggle input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

.toggle input[type="radio"]:disabled + .label-text:before{
	content: "\f204";
	color: #ccc;
}


@keyframes effect{
	0%{transform: scale(0);}
	25%{transform: scale(1.3);}
	75%{transform: scale(1.4);}
	100%{transform: scale(1);}
}	

                                    
Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Elastic Content Slider

Elastic Content Slider

Header with background animate 01

Header with background animate 01

Manual Slideshow

Manual Slideshow

Pie Charts

Pie Charts

Scroll to div ID

Scroll to div ID

Tablet style code texte

Tablet style code texte

Texte Block Posts Style01

Texte Block Posts Style01

Timeline style01

Timeline style01

Timeline style08

Timeline style08

Vers le haut

Vers le haut