Radio button style

<!DOCTYPE html>
<html>
<head>
  <title>Radio button style | Par NGLESSON</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="Radio button style ">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="index,follow">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="#">
  <p>
    <input type="radio" id="test1" name="radio-group" value="Rouge" checked>
    <label for="test1">Rouge</label>
  </p>
  <p>
    <input type="radio" id="test2" name="radio-group" value="Vert">
    <label for="test2">Vert</label>
  </p>
  <p>
    <input type="radio" id="test3" name="radio-group" value="Blanc">
    <label for="test3">Blanc</label>
  </p>
  <p>
    <input type="radio" id="test4" name="radio-group" value="Noir">
    <label for="test4">Noir</label>
  </p>
  <p>
    <input type="radio" id="test5" name="radio-group" value="Rose">
    <label for="test5">Rose</label>
  </p>
</form>
</body>
</html>
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #F87DA9;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

                                    
Vidéo background en html5 style01

Vidéo background en html5 style01

Timeline style01

Timeline style01

Profile page with b4

Profile page with b4

Nav Menu style01

Nav Menu style01

Input range slider HTML style04

Input range slider HTML style04

Image hover effects style

Image hover effects style

Form Création de compte

Form Création de compte

Créer une input search animée

Créer une input search animée

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Carousel Bootstrap3

Carousel Bootstrap3

Cards box with title

Cards box with title

Background div gradient

Background div gradient