Customizable radios

In this example below you will see how to do a Customizable radios with some HTML / CSS and Javascript

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.

Thumbnail
This awesome code was written by theeternalsw0rd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright theeternalsw0rd ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/theeternalsw0rd/customizable-radios-aADjG */
#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/theeternalsw0rd/customizable-radios-aADjG */
$('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();
});

Comments