How to Create Custom Checkboxes and Radio Buttons

Checkboxes and radio buttons are HTML elements used to capture user input. While styling is considered to be quite complicated, using pseudo elements such as :before, :after, :active, :hover and :checked, can help to style checkboxes. If you want to style the checkbox or the radio button, you first should hide the default style.

In this article we will cover three essential points:

  1. How To Create a Custom Checkbox
  2. How To Create a Custom Radio Button
  3. How to Add Custom Image Checkboxes and Radio Buttons

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

How To Create a Custom Checkbox

For removing the default checkbox style, you need to set the CSS visibility property with its "hidden" value. Or use the opacity property set to zero (0).

Primarily, you must think about the situations in which you want your checkbox to be styled individually, such as when it is normal, active, hovered, or checked. Next, for each situation, define separate styles as used in normal CSS. Moreover, it is also possible to modify the check-mark.

Example of creating a custom checkbox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 20px;
      }
      /* Hide the default style of the checkbox */
      input[type=checkbox] {
        visibility: hidden;
      }
      /* Create a custom checkbox */
      .mark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #999999;
      }
      /* Specify the background color for the checkbox while hovering */
      .box:hover input + .mark {
        background-color: #1c87c9;
      }
      /* Specify the background color for the checkbox when the checkbox is active */
      .box input:active + .mark {
        background-color: #ffcc00;
      }
      /* Specify the background color for the checkbox when it is checked */
      .box input:checked + .mark {
        background-color: #8ebf42;
      }
      /* Checkmark to be shown in checkbox */
      /* It will not be shown when not checked */
      .mark:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* Display checkmark when checked */
      .box input:checked + .mark:after {
        display: block;
      }
      /* Styling the checkmark using webkit */
      /* Rotated the rectangle by 45 degree and showing only two border to make it look like a tick mark */
      .box .mark:after {
        left: 8px;
        bottom: 5px;
        width: 6px;
        height: 12px;
        border: solid #eee;
        border-width: 0 4px 4px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Custom checkboxes</h2>
    <p>Select a checkbox to see how the colors are being changed:</p>
    <form>
      <label class="box">Stackdev
        <input type="checkbox">
        <span class="mark"></span>
      </label>
      <label class="box">W3docs
        <input type="checkbox" checked="checked">
        <span class="mark"></span>
      </label>
      <label class="box">Arcnet
        <input type="checkbox">
        <span class="mark"></span>
      </label>
    </form>
  </body>
</html>

Result

Select a checkbox to see how the colors are being changed:

Here the + is the sibling combinator used to combine two sequences of simple selectors having the same parent, and the second one must come immediately after the first.

There can also be used the ~ selector, which is the sibling combinator. It selects all the elements which are preceded by the former selector.

Let’s consider another example with a little different design of the check-mark.

Use the CSS border property for setting a different check-mark.

Example of creating a custom checkbox with a different check-mark:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 20px;
      }
      /* Hide the default style of the checkbox */
      input[type=checkbox] {
        visibility: hidden;
      }
      /* Create a custom checkbox */
      .mark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #999999;
      }
      /* Specify the background color for the checkbox while hovering */
      .box:hover input ~ .mark {
        background-color: #1c87c9;
      }
      /* Specify the background color for the checkbox when the checkbox is active */
      .box input:active ~ .mark {
        background-color: #ffcc00;
      }
      /* Specify the background color for the checkbox when it is checked */
      .box input:checked ~ .mark {
        background-color: #8ebf42;
      }
      /* Checkmark to be shown in checkbox */
      /* It will not be shown when not checked */
      .mark:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* Display checkmark when checked */
      .box input:checked ~ .mark:after {
        display: block;
      }
      /* Styling the checkmark using webkit */
      /* Rotated the rectangle by 45 degree and showing only two borders to make it look like a tick mark */
      .box .mark:after {
        left: 5px;
        bottom: 5px;
        width: 6px;
        height: 6px;
        border: double #ffffff;
        border-width: 4px 4px 4px 4px;
      }
    </style>
  </head>
  <body>
    <h2>Custom checkbox</h2>
    <p>Select a checkbox to see how the colors are being changed:</p>
    <form>
      <label class="box">Stackdev
        <input type="checkbox">
        <span class="mark"></span>
      </label>
      <label class="box">W3docs
        <input type="checkbox" checked="checked">
        <span class="mark"></span>
      </label>
      <label class="box">Arcnet
        <input type="checkbox">
        <span class="mark"></span>
      </label>
    </form>
  </body>
</html>

See another example where some awesome checkboxes like slides are illustrated.

Example of creating checkboxes like slides:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .exampleOne {
        width: 28px;
        height: 28px;
        position: relative;
        margin: 20px auto;
        background: #fcfff4;
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .exampleOne label {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 4px;
        left: 4px;
        cursor: pointer;
        background: linear-gradient(top, #222 0%, #45484d 100%);
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
      }
      .exampleOne label:after {
        content: '';
        width: 16px;
        height: 16px;
        position: absolute;
        top: 2px;
        left: 2px;
        background: #27ae60;
        background: linear-gradient(top, #27ae60 0%, #145b32 100%);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
        opacity: 0;
      }
      .exampleOne label:hover::after {
        opacity: 0.3;
      }
      .exampleOne input[type=checkbox] {
        visibility: hidden;
      }
      .exampleOne input[type=checkbox]:checked + label:after {
        opacity: 1;
      }
      .exampleTwo {
        width: 20px;
        position: relative;
        margin: 20px auto;
      }
      .exampleTwo label {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(top, #222 0%, #45484d 100%);
        border-radius: 4px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, .4);
      }
      .exampleTwo label:after {
        content: '';
        width: 9px;
        height: 5px;
        position: absolute;
        top: 4px;
        left: 4px;
        border: 3px solid #fcfff4;
        border-top: none;
        border-right: none;
        background: transparent;
        opacity: 0;
        transform: rotate(-45deg);
      }
      .exampleTwo label:hover::after {
        opacity: 0.3;
      }
      .exampleTwo input[type=checkbox] {
        visibility: hidden;
      }
      .exampleTwo input[type=checkbox]:checked + label:after {
        opacity: 1;
      }
      .example {
        width: 20px;
        position: relative;
        margin: 20px auto;
      }
      .example label {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: #fcfff4;
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        border-radius: 4px;
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label:after {
        content: '';
        width: 9px;
        height: 5px;
        position: absolute;
        top: 4px;
        left: 4px;
        border: 3px solid #333;
        border-top: none;
        border-right: none;
        background: transparent;
        opacity: 0;
        transform: rotate(-45deg);
      }
      .example label:hover::after {
        opacity: 0.5;
      }
      .example input[type=checkbox] {
        visibility: hidden;
      }
      .example input[type=checkbox]:checked + label:after {
        opacity: 1;
      }
      * {
        box-sizing: border-box;
      }
      body {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
      }
      body h1,
      body h2,
      body p {
        color: #333;
        font-size: 30px;
        text-align: center;
        margin: 20px 0 0 0;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000;
      }
      body p {
        font-size: 14px;
        text-align: center;
        display: block;
        margin-bottom: 50px;
      }
      body .ondisplay {
        text-align: center;
        padding: 20px 0;
      }
      body .ondisplay section {
        width: 150px;
        height: 80px;
        background: #555;
        display: inline-block;
        position: relative;
        text-align: center;
        margin-top: 5px;
        border: 1px solid gray;
        border-radius: 5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      body .ondisplay section:after {
        /*         visibility: hidden; */
        content: attr(title);
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 3px;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000;
      }
    </style>
  </head>
  <body>
    <h2>Custom checkboxes</h2>
    <p>Select a checkbox to see the effect:</p>
    <div class="ondisplay">
      <section title="exampleOne">
        <div class="exampleOne">
          <input type="checkbox" value="None" id="exampleOne" name="check" checked />
          <label for="exampleOne"></label>
        </div>
      </section>
      <section title="exampleTwo">
        <div class="exampleTwo">
          <input type="checkbox" value="None" id="exampleTwo" name="check" checked />
          <label for="exampleTwo"></label>
        </div>
      </section>
      <section title="example">
        <div class="example">
          <input type="checkbox" value="None" id="example" name="check" checked />
          <label for="example"></label>
        </div>
      </section>
    </div>
  </body>
</html>

See another example of beautifully styled checkboxes.

Example of creating checkboxes with various styles:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* .exampleOne */
      .exampleOne {
        width: 50px;
        height: 10px;
        background: #333;
        margin: 20px auto;
        position: relative;
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleOne label {
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        top: -3px;
        left: -3px;
        cursor: pointer;
        background: #fcfff4;
        background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        border-radius: 50px;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
        transition: all 0.4s ease;
      }
      .exampleOne input[type=checkbox] {
        visibility: hidden;
      }
      .exampleOne input[type=checkbox]:checked + label {
        left: 37px;
      }
      /* end .exampleOne */
      /* .exampleTwo */
      .exampleTwo {
        width: 80px;
        height: 30px;
        background: #333;
        margin: 20px auto;
        position: relative;
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleTwo:after {
        content: '';
        position: absolute;
        top: 14px;
        left: 14px;
        height: 2px;
        width: 52px;
        background: #111;
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleTwo label {
        display: block;
        width: 22px;
        height: 22px;
        cursor: pointer;
        position: absolute;
        top: 4px;
        z-index: 1;
        left: 4px;
        background: #fcfff4;
        border-radius: 50px;
        transition: all 0.4s ease;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      }
      .exampleTwo label:after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: 6px;
        left: 6px;
        background: #333;
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 1), 0px 1px 0px rgba(255, 255, 255, 0.9);
      }
      .exampleTwo input[type=checkbox] {
        visibility: hidden;
      }
      .exampleTwo input[type=checkbox]:checked + label {
        left: 54px;
      }
      .exampleTwo input[type=checkbox]:checked + label:after {
        background: #27ae60;
        /*activeColor*/
      }
      /* end .exampleTwo */
      /* .exampleThree */
      .exampleThree {
        width: 80px;
        height: 26px;
        background: #333;
        margin: 20px auto;
        position: relative;
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleThree:after {
        content: 'OFF';
        color: #000;
        position: absolute;
        right: 10px;
        z-index: 0;
        font: 12px/26px Arial, sans-serif;
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(255, 255, 255, .15);
      }
      .exampleThree:before {
        content: 'ON';
        color: #27ae60;
        position: absolute;
        left: 10px;
        z-index: 0;
        font: 12px/26px Arial, sans-serif;
        font-weight: bold;
      }
      .exampleThree label {
        display: block;
        width: 34px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        background: #fcfff4;
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        border-radius: 50px;
        transition: all 0.4s ease;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
      }
      .exampleThree input[type=checkbox] {
        visibility: hidden;
      }
      .exampleThree input[type=checkbox]:checked + label {
        left: 43px;
      }
      /* end .exampleThree */
      /* .example */
      .example {
        width: 28px;
        height: 28px;
        position: relative;
        margin: 20px auto;
        background: #fcfff4;
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        left: 4px;
        top: 4px;
        background: linear-gradient(top, #222 0%, #45484d 100%);
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
      }
      .example label:after {
        content: '';
        width: 16px;
        height: 16px;
        position: absolute;
        top: 2px;
        left: 2px;
        background: #27ae60;
        background: linear-gradient(top, #27ae60 0%, #145b32 100%);
        opacity: 0;
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label:hover::after {
        opacity: 0.3;
      }
      .example input[type=checkbox] {
        visibility: hidden;
      }
      .example input[type=checkbox]:checked + label:after {
        opacity: 1;
      }
      /* end .example */
      * {
        box-sizing: border-box;
      }
      body {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
      }
      body h2,
      body p {
        color: #333;
        font-size: 30px;
        text-align: center;
        margin: 20px 0 0 0;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000;
      }
      body p {
        font-size: 14px;
        text-align: center;
        display: block;
        margin-bottom: 50px;
      }
      body .ondisplay {
        text-align: center;
        padding: 20px 0;
      }
      body .ondisplay section {
        width: 150px;
        height: 80px;
        background: #555;
        display: inline-block;
        position: relative;
        text-align: center;
        margin-top: 5px;
        border: 1px solid gray;
        border-radius: 5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      body .ondisplay section:after {
        /*  visibility: hidden; */
        content: attr(title);
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 3px;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000;
      }
    </style>
  </head>
  <body>
    <h2>Custom checkboxes</h2>
    <p>Select a checkbox to see the effect:</p>
    <div class="ondisplay">
      <section title="exampleOne">
        <div class="exampleOne">
          <input type="checkbox" value="None" id="exampleOne" name="check" checked />
          <label for="exampleOne"></label>
        </div>
      </section>
      <section title="exampleTwo">
        <div class="exampleTwo">
          <input type="checkbox" value="None" id="exampleTwo" name="check" checked />
          <label for="exampleTwo"></label>
        </div>
      </section>
      <section title="exampleThree">
        <div class="exampleThree">
          <input type="checkbox" value="None" id="exampleThree" name="check" checked />
          <label for="exampleThree"></label>
        </div>
      </section>
      <section title="example">
        <div class="example">
          <input type="checkbox" value="None" id="example" name="check" checked />
          <label for="example"></label>
        </div>
      </section>
    </div>
  </body>
</html>

How To Create a Custom Radio Button

Frequently you will need to change the default radio button style to have attractive forms. For that purpose, you first need to hide the default style of the radio button using the CSS opacity property set to zero (0). Or use the visibility property with its "hidden" value. Then, add your preferred styles.

Example of creating a custom radio button:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* The container */
      .container {
        display: block;
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      /* Hide the browser's default radio button */
      .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
      }
      /* Create a custom radio button */
      .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eeeeee;
        border-radius: 50%;
      }
      /* On mouse-over, add a gray background color */
      .container:hover input ~ .checkmark {
        background-color: #999999;
      }
      /* When the radio button is selected, add a blue background */
      .container input:checked ~ .checkmark {
        background-color: #1c87c9;
      }
      /* Create the indicator (the dot/circle - hidden when not checked) */
      .checkmark:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* Show the indicator (dot/circle) when checked */
      .container input:checked ~ .checkmark:after {
        display: block;
      }
      /* Style the indicator (dot/circle) */
      .container .checkmark:after {
        top: 8px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>Custom Radio Buttons</h2>
    <form action="/form/submit" method="POST">
      <label class="container">W3docs
        <input type="radio" checked="checked" name="radio">
        <span class="checkmark"></span>
      </label>
      <label class="container">Stackdev
        <input type="radio" name="radio">
        <span class="checkmark"></span>
      </label>
      <label class="container">Arcnet
        <input type="radio" name="radio">
        <span class="checkmark"></span>
      </label>
    </form>
  </body>
</html>

How to Add Custom Image Checkboxes and Radio Buttons

It is also possible to set a background as the check-mark using the background or background-image properties with some jQuery.

Next, prepare some images to set as a check-mark. One for the case when the checkbox or radio button is not selected, second for a checkbox when it is being hovered, and third for a checkbox when it is selected. You will also need three images for the radio button.

Example of creating a checkbox with a custom background image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-checkbox {
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 5px;
        background: url("/uploads/media/default/0001/03/483349bb5ad90c3556217ac81ff8f0042c3d72fe.png") no-repeat;
      }
      .custom-checkbox:hover {
        background: url("/uploads/media/default/0001/03/c2c03c6386a75dab0f4787cea57b4a27b3261379.png") no-repeat;
      }
      .custom-checkbox.selected {
        background: url("/uploads/media/default/0001/03/499ee5a518caa7ef7f3367b69e368c791a9591f2.png") no-repeat;
      }
      .custom-checkbox input[type="checkbox"] {
        margin: 0;
        position: absolute;
        z-index: 2;
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* for older browsers */
        _noFocusLine: expression(this.hideFocus=true);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
      }
      /* Beautify the Form */
      form {
        margin: 20px;
      }
      label {
        display: block;
        padding: 3px 0;
      }
      input[type="submit"] {
        width: 100px;
        height: 30px;
        background: #eeeeee;
        border: 1px solid #999999;
        border-radius: 3px;
        margin-top: 20px;
        padding: 4px 10px;
        cursor: pointer;
        outline: none;
        font-weight: bold;
        color: #333333;
      }
      input[type="submit"]:hover {
        color: #fff;
        border-color: #eeeeee;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="POST">
      <h3>Choose Your Favorite Drinks</h3>
      <label>
        <input type="checkbox" name="drinks[]" value="americano" /> Americano
      </label>
      <label>
        <input type="checkbox" name="drinks[]" value="espresso" /> Espresso
      </label>
      <label>
        <input type="checkbox" name="drinks[]" value="iced-tea" /> Iced Tea
      </label>
      <label>
        <input type="checkbox" name="drinks[]" value="hot-chocolate" /> Hot Chocolate
      </label>
      <h3>Choose Your Favorite Cars</h3>
      <label>
        <input type="checkbox" name="car[]" value="jeep" /> Jeep
      </label>
      <label>
        <input type="checkbox" name="car[]" value="lada" /> Lada
      </label>
      <label>
        <input type="checkbox" name="car[]" value="audi" /> Audi
      </label>
      <label>
        <input type="checkbox" name="car[]" value="mercedes" /> Mercedes
      </label>
      <h3>Confirm?</h3>
      <label>
        <input type="checkbox" name="confirm" checked="checked" value="yes" /> Yes
      </label>
      <input type="submit" value="Submit" />
    </form>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      function customCheckbox(checkboxName) {
        var checkBox = $('input[name="' + checkboxName + '"]');
        $(checkBox)
          .each(function() {
            $(this)
              .wrap("<span class='custom-checkbox'></span>");
            if($(this)
              .is(':checked')) {
              $(this)
                .parent()
                .addClass("selected");
            }
          });
        $(checkBox)
          .click(function() {
            $(this)
              .parent()
              .toggleClass("selected");
          });
      }
      $(document)
        .ready(function() {
          customCheckbox("drinks[]");
          customCheckbox("car[]");
          customCheckbox("confirm");
        })
    </script>
  </body>
</html>

Here, let’s see another example of a radio button with custom background image.

Example of creating a radio button with custom background image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-radio {
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 5px;
        background: url("/uploads/media/default/0001/03/b3bdb04777eb889cfdfe1e44c0fca7b6896cc9b5.png") no-repeat;
      }
      .custom-radio:hover {
        background: url("/uploads/media/default/0001/03/27b06624c37686ed1a1a673ac230366a91c9cfba.png") no-repeat;
      }
      .custom-radio.selected {
        background: url("/uploads/media/default/0001/03/66199bdb5884a7f502448ee44acfb48887c889bf.png") no-repeat;
      }
      .custom-radio input[type="radio"] {
        margin: 1px;
        position: absolute;
        z-index: 2;
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS hacks for older browsers */
        _noFocusLine: expression(this.hideFocus=true);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
      }
      /* Beautify the Form */
      form {
        margin: 20px;
      }
      label {
        display: block;
        padding: 2px 0;
      }
      input[type="submit"] {
        width: 100px;
        height: 30px;
        background: #eeeeee;
        border: 1px solid #999999;
        border-radius: 3px;
        margin-top: 20px;
        padding: 4px 10px;
        cursor: pointer;
        outline: none;
        font-weight: bold;
        color: #333333;
      }
      input[type="submit"]:hover {
        color: #fff;
        border-color: #eeeeee;
        background-color: #ffcc00;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="POST">
      <h3>What Is Your Favorite Web Browser</h3>
      <label>
        <input type="radio" name="browser" value="chrome"> Chrome</label>
      <label>
        <input type="radio" name="browser" value="firefox"> Firefox</label>
      <label>
        <input type="radio" name="browser" value="opera"> Opera</label>
      <h3>What Is Your Favorite Search Engine</h3>
      <label>
        <input type="radio" name="search-engine" value="google"> Google</label>
      <label>
        <input type="radio" name="search-engine" value="yahoo"> Yahoo</label>
      <label>
        <input type="radio" name="search-engine" value="bing"> Bing</label>
      <h3>Confirm?</h3>
      <label>
        <input type="radio" name="confirm" checked="checked" value="yes"> Yes</label>
      <label>
        <input type="radio" name="confirm" value="no"> No</label>
      <input type="submit" value="Submit">
    </form>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      function customRadio(radioName) {
        var radioButton = $('input[name="' + radioName + '"]');
        $(radioButton)
          .each(function() {
            $(this)
              .wrap("<span class='custom-radio'></span>");
            if($(this)
              .is(':checked')) {
              $(this)
                .parent()
                .addClass("selected");
            }
          });
        $(radioButton)
          .click(function() {
            if($(this)
              .is(':checked')) {
              $(this)
                .parent()
                .addClass("selected");
            }
            $(radioButton)
              .not(this)
              .each(function() {
                $(this)
                  .parent()
                  .removeClass("selected");
              });
          });
      }
      $(document)
        .ready(function() {
          customRadio("browser");
          customRadio("search-engine");
          customRadio("confirm");
        })
    </script>
  </body>
</html>

See another funny example where Emojis are set as radio buttons.

Example of using emojis as radio buttons:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      strong {
        display: block;
        padding-left: 30px;
        margin-bottom: 10px;
      }
      label {
        display: block;
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .customize-radio label > input[type='radio'] {
        visibility: hidden;
        position: absolute;
      }
      .customize-radio label > input[type='radio'] ~ span {
        cursor: pointer;
        width: 31px;
        height: 31px;
        display: inline-block;
        background-size: 31px 31px;
        background-repeat: no-repeat;
        vertical-align: middle;
      }
      .happy {
        background-image: url("/uploads/media/default/0001/03/6819c91c6e19febea25c93b1923427482a6652cd.png");
      }
      .sad {
        background-image: url("/uploads/media/default/0001/03/626aae8381eddd269282a2c5871715e4303a93de.png");
      }
      .love {
        background-image: url("/uploads/media/default/0001/03/e4d188f2ee21a937a23e2d3e94f1aced2fa3c662.png");
      }
      .customize-radio label > input[type='radio']:checked ~ span.happy {
        background-image: url("/uploads/media/default/0001/03/67b31cf9b5e4a31624b2ffc00f483be0bef2511d.png");
      }
      .customize-radio label > input[type='radio']:checked ~ span.sad {
        background-image: url("/uploads/media/default/0001/03/1f0a4d909e8756a7cfff70a9125a2736740a3fc9.png");
      }
      .customize-radio label > input[type='radio']:checked ~ span.love {
        background-image: url("/uploads/media/default/0001/03/5bdfbcf51b653b5d8518b30b7876b43e352e3236.png");
      }
    </style>
  </head>
  <body>
    <form class="customize-radio">
      <strong>How do you feel today?</strong>
      <br>
      <label for="happy">
        <input type="radio" name="smiley" id="happy">
        <span class="happy"></span> HAPPY
      </label>
      <label for="sad">
        <input type="radio" name="smiley" id="sad">
        <span class="sad"></span> SAD
      </label>
      <label for="love">
        <input type="radio" name="smiley" id="love" checked>
        <span class="love"></span> LOVELY
      </label>
    </form>
  </body>
</html>