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);}
}	

                                    
login page green one

login page green one

Vidéo background en html5 style02

Vidéo background en html5 style02

Vers le haut

Vers le haut

Loading style water animation

Loading style water animation

Image hover style border top

Image hover style border top

Google Style Login

Google Style Login

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

ChartJS style01

ChartJS style01

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select