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 >
  <meta charset="UTF-8">
  <title>Customizable radios</title>
      <link rel="stylesheet" href="css/style.css">


  <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 class='radio-label' data-for='input-id'>Radio text 1</span>
    <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 class='radio-label' data-for='input-id2'>Radio text 2</span>
  <input type='submit' value='Submit' />
<div id='result'></div>
  <script src=''></script>

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

/* Downloaded from */
#radio-group {
  width: 200px;
.radio-header {
  font-weight: bold;
  font-size: 1.4em;
} {
  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;
} {
  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;
} {
  display: inline-block;
  padding: 0.25em 0 0 2em;

input {
  display: block;
/* Downloaded from */
.on('click', "input[type='radio']", function(e) {
  // fix webkit focus
.on('click', "span.checkbox-label, span.faux-checkbox", function(e) {
  // fix multiple click issues

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

2018 © Micah Bucy