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

                                    
Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Card Profile Style01

Card Profile Style01

ChartJS style01

ChartJS style01

Image hover 05

Image hover 05

Input range slider HTML style02

Input range slider HTML style02

Input range slider HTML style03

Input range slider HTML style03

Loading style book loader

Loading style book loader

Organization Chart

Organization Chart

Social Media Icons

Social Media Icons

Texte Block Posts Style01

Texte Block Posts Style01

Timeline style03

Timeline style03

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01