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

                                    
texte animate effects style 01

texte animate effects style 01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Nav Menu style02

Nav Menu style02

Loading style book loader

Loading style book loader

Input range slider HTML style01

Input range slider HTML style01

Elastic Content Slider

Elastic Content Slider

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Créer une input search animée

Créer une input search animée

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Card Bootstrap4 02

Card Bootstrap4 02

Buttons Styles Inspirations

Buttons Styles Inspirations

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau