Material Design Radio

by Ayyappan Sakthivadivel

HTML

<div class="col-md-2"></div>
<div class="col-md-6">
<p>
    <input class="vwt-Radio vwt-RadioGapStyle" name="group1" type="radio" id="test65"  />
            <label for="test65">Green</label>
    <input class="vwt-Radio vwt-RadioGapStyle" name="group1" type="radio" id="test5"  />
            <label for="test5">Green</label>
            <input class="vwt-Radio vwt-RadioGapStyle" name="group1" type="radio" id="test2"  />
            <label for="test2">Green</label>
    
    <input class="vwt-Radio vwt-RadioGapStyle" name="group1" type="radio" id="test1"  />
            <label for="test1">Green</label>
    
    <input class="vwt-Radio vwt-RadioGapStyle" name="group1" type="radio" id="test3" checked>
            <label for="test3">Green</label>
          </p></div>

CSS

input[type="checkbox"], input.vwt-Radio[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0
  /* 2 */ }

/* Remove default Radio Buttons */
.vwt-Radio[type="radio"]:not(:checked), .vwt-Radio[type="radio"]:checked {
  position: absolute;
  left: -9999px;
  visibility: hidden; }

.vwt-Radio[type="radio"]:not(:checked) + label, .vwt-Radio[type="radio"]:checked + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  -webkit-transition: .28s ease;
  -moz-transition: .28s ease;
  -o-transition: .28s ease;
  -ms-transition: .28s ease;
  transition: .28s ease;
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  
  /* IE10+ */ }

.vwt-Radio[type="radio"] + label:before, .vwt-Radio[type="radio"] + label:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 16px;
  height: 16px;
  z-index: 0;
  -webkit-transition: .28s ease;
  -moz-transition: .28s ease;
  -o-transition: .28s ease;
  -ms-transition: .28s ease;
  transition: .28s ease; }

/* Unchecked styles */
.vwt-Radio[type="radio"]:not(:checked) + label:before {
  border-radius: 50%;
  border: 2px solid #5a5a5a; }

.vwt-Radio[type="radio"]:not(:checked) + label:after {
  border-radius: 50%;
  border: 2px solid #5a5a5a;
  z-index: -1;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0); }

/* Checked styles */
.vwt-Radio[type="radio"]:checked + label:before {
  border-radius: 50%;
  border: 2px solid transparent; }

.vwt-Radio[type="radio"]:checked + label:after {
  border-radius: 50%;
  border: 2px solid #26a69a;
  background-color: #26a69a;
  z-index: 0;
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform:...