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

                                    
Table Responsive with css 01

Table Responsive with css 01

Radio button style

Radio button style

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Manual Slideshow

Manual Slideshow

Image hover effects style

Image hover effects style

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover 07

Image hover 07

Image hover 06

Image hover 06

Image hover 01

Image hover 01

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Alert Bootstrap4 style01

Alert Bootstrap4 style01