Customizable radios

An attempt at using only html and css to generate a customized radio. Javascript provided isn't necessary, but works around some issues. Good for an intranet site where you can be certain of up to date browsers as it requires border-radius. Could be changed to use images instead for better backwards compatibility.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Customizable radios</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <form id='form'>
  <header class='radio-header'>Header for radio group:</header>
  <div id='radio-group'>
    <label for='input-id' class='radio'>
      <input id='input-id' name='radio-group' class='real-radio' type='radio' value='1'/>
      <span class='faux-radio' data-for='input-id'>
        <span class='bullet'></span>
      </span>
      <span class='radio-label' data-for='input-id'>Radio text 1</span>
    </label>
    <label for='input-id2' class='radio'>
      <input id='input-id2' name='radio-group' class='real-radio' type='radio' value='2' />
      <span class='faux-radio' data-for='input-id2'>
        <span class='bullet'></span>
      </span>
      <span class='radio-label' data-for='input-id2'>Radio text 2</span>
    </label>
  </div>
  <input type='submit' value='Submit' />
</form>
<div id='result'></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#radio-group {
  width: 200px;
}
.radio-header {
  font-weight: bold;
  font-size: 1.4em;
}
label.radio {
  cursor: pointer;
  display: block;
  font-size: 16px;
  position: relative;
  padding: 5px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
label.radio:hover {
  background: #dfdfdf;
}
input.real-radio {
  position: absolute;
  opacity: 0; /* visibility: hidden disables focusability */
}
span.faux-radio {
  display: block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  left: 6px;
  border: 1px solid #c5dbec;
  background: #dfeffc;
}
span.faux-radio span.bullet {
  background: #dfeffc;
  display: block;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  top: 3px;
  left: 3px;
}
input.real-radio:focus + span.faux-radio {
  border: 1px solid #79b7e7;
  box-shadow: 0 0 5px #79b7e7;
}
input.real-radio:hover + span.faux-radio {
  box-shadow: 0 0 5px #28699c !important;
}
input.real-radio:checked + span.faux-radio span.bullet {
  background: #2e6e9e;
}
span.radio-label {
  display: inline-block;
  padding: 0.25em 0 0 2em;
}

input {
  display: block;
}
/* Downloaded from https://www.codeseek.co/ */
$('body')
.on('click', "input[type='radio']", function(e) {
  // fix webkit focus
  jQuery(this).focus();
})
.on('click', "span.checkbox-label, span.faux-checkbox", function(e) {
  // fix multiple click issues
  e.preventDefault();
  e.stopPropagation();
  $(document.getElementById($(this).attr('data-for'))).click();
});

This awesome code ( Customizable radios ) is write by Micah Bucy, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Micah Bucy