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

                                    
toggle switch style02

toggle switch style02

toggle switch style01

toggle switch style01

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Table bootstrap with Datatable

Table bootstrap with Datatable

Menu aside style01 slide out

Menu aside style01 slide out

Login Bootstrap3

Login Bootstrap3

Image hover Inspiration styles

Image hover Inspiration styles

Image hover 05

Image hover 05

Form Création de compte style animée

Form Création de compte style animée

Carousel Bootstrap4

Carousel Bootstrap4

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Arrows Defense Game

Arrows Defense Game