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

                                    
texte animate css

texte animate css

input file récupérer le nom du fichier

input file récupérer le nom du fichier

Titre section avec une bande style01

Titre section avec une bande style01

Table responsive avec css native

Table responsive avec css native

Responsive image grid

Responsive image grid

Radio button style

Radio button style

Organization Chart

Organization Chart

Manual Slideshow

Manual Slideshow

Input range slider HTML style05

Input range slider HTML style05

Créer une input search animée

Créer une input search animée

Buttons Styles Inspirations

Buttons Styles Inspirations

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table