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

                                    
up down tr in table with js

up down tr in table with js

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Table responsive avec css native

Table responsive avec css native

Scroll down button 01

Scroll down button 01

Pie Charts

Pie Charts

Image hover 03

Image hover 03

Convertir une div en image

Convertir une div en image

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

ChartJS style01

ChartJS style01

Carousel Bootstrap4

Carousel Bootstrap4

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Ajouter une pagination1

Ajouter une pagination1