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

                                    
Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Bootstrap4 datepicker

Bootstrap4 datepicker

Buttons Styles Inspirations

Buttons Styles Inspirations

Create icon animate with svg

Create icon animate with svg

Drag and drop or upload input file

Drag and drop or upload input file

Form login 02

Form login 02

Image hover 01

Image hover 01

Input range slider HTML style04

Input range slider HTML style04

Loading Style snake

Loading Style snake

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Titre section avec une bande style01

Titre section avec une bande style01

texte animate css

texte animate css