CodePen Embed - Styling checkboxes and radio buttons with CSS

<div id="navigation">
    <div class="go-back"><a href="http://8bit-code.com/article/styling-checkboxes-and-radio-buttons-with-css" title="Styling checkboxes and radio buttons with CSS" target="_blank">&larr; to article</a>
    </div>
    <div class="article-title"><a href="http://8bit-code.com/article/styling-checkboxes-and-radio-buttons-with-css" title="Styling checkboxes and radio buttons with CSS" target="_blank">Styling checkboxes and radio buttons with CSS</a>
    </div>
</div>
<!-- #navigation -->

<div class="container">
    <div class="box blue">
        <h1>Using background-image</h1>
        <input type="checkbox" id="1">
        <label for="1"><span class="checkbox"></span>
        </label>
        <input type="radio" id="5">
        <label for="5"><span class="radiobtn"></span>
        </label>
    </div>
    <div class="box green">
        <h1>Using background-image w/ transparent filling</h1>
        <input type="checkbox" id="2" checked>
        <label for="2"><span class="checkbox"></span>
        </label>
        <input type="radio" id="6" checked>
        <label for="6"><span class="radiobtn"></span>
        </label>
        <h2>(refresh the page to see the color change)</h2>
    </div>
    <div class="box dark-blue">
        <h1>Using plain CSS (:before & :after)</h1>
        <input type="checkbox" id="3">
        <label for="3"><span class="checkbox"></span>
        </label>
        <input type="radio" id="7">
        <label for="7"><span class="radiobtn"></span>
        </label>
    </div>
    <div class="box orange">
        <h1>Using inline SVG</h1>
        <input type="checkbox" id="4">
        <label for="4">
            <span class="checkbox">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24"><path fill="#95a5a6" d="M21.7 3.2c-.3-.3-.8-.3-1.1 0l-11.2 11.1c-.3.3-.8.3-1.1 0l-4.9-5c-.1-.1-.3-.2-.5-.2s-.4.1-.5.2l-2.2 1.9c-.1.2-.2.4-.2.6 0 .2.1.4.2.5l4.9 5.2 1.1 1.1 2.1 2.1c.3.3.8.3 1.1 0l14.4-14.3c.3-.3.3-.8 0-1.1l-2.1-2.1z"/></svg>
                </span>
        </label>
        <input type="radio" id="8">
        <label for="8">
            <span class="radiobtn">
                    <svg width="100px" height="100px">
                        <circle cx="50" cy="50" r="15" fill="#95a5a6" />
                    </svg>
                </span>
        </label>
    </div>
</div>
<!-- .container -->

body {
  font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}

.box {
  width: 50%;
  height: 500px;
  float: left;
  text-align: center;
}

.box.blue {
  background: rgb(0, 160, 192);
}

.box.green {
  background: rgb(40, 156, 95);
}

.box.dark-blue {
  background: rgb(40, 54, 127);
}

.box.orange {
  background: rgb(246, 134, 71);
}

h1 {
  display: block;
  font-size: 22px;
  color: #fff;
  margin: 10% 0 18% 0;
}

h2 {
  display: block;
  font-size: 15px;
  color: #fff;
  margin: 10% 0 18% 0;
}

/* hide checkbox and radio inputs from modern browsers */
body:not(#foo) input[type='checkbox'] {
  opacity: 0;
}

body:not(#foo) input[type='radio'] {
  opacity: 0;
}

/* set default styles for the checkboxes and radio buttons */
body:not(#foo) .checkbox,.radiobtn {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0 10% 0 auto;
  cursor: pointer;
  -webkit-filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));
  -moz-filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));
  filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));
  position: relative;
}


.blue label span.checkbox {
  background: url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/checkbox.png) 0px 0px;
}


.blue input[type='checkbox']:checked + label span.checkbox {
  background: url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/checkbox.png) 0px -110px;
}

.blue label span.radiobtn {
  background: url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/radiobtn.png) 0px 0px;
}


.blue input[type='radio']:checked + label span.radiobtn {
  background: url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/radiobtn.png) 0px -110px;
}


.green label span.checkbox {
  background: #ecf0f1 url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/checkbox_transparent.png);
}

.green input[type='checkbox']:checked + label span.checkbox {
  background: #ecf0f1 url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/checkbox_transparent.png);
}

.green label span.radiobtn {
  background: #ecf0f1 url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/radio_transparent.png);
  border-radius: 100px;
}

.green input[type='radio']:checked + label span.radiobtn {
  background: #ecf0f1 url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/radio_transparent.png);
}


.dark-blue input[type='checkbox'] + label span.checkbox {
  background: #ecf0f1;
}

.dark-blue input[type='checkbox']:checked + label span.checkbox:after {
  content: "";
  position: absolute;
  top: 43px;
  left: 26px;
  width: 14px;
  height: 38px;
  background: #95a5a6;
  z-index: 1;
  -webkit-transform: rotate(-44deg);
  -moz-transform: rotate(-44deg);
  transform: rotate(-44deg);
  border-radius: 2px;
}

.dark-blue input[type='checkbox']:checked + label span.checkbox:before {
  content: "";
  position: absolute;
  top: 22px;
  right: 34px;
  width: 14px;
  height: 62px;
  background: #95a5a6;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 2px;
}

.dark-blue input[type='radio'] + label span.radiobtn {
  background: #ecf0f1;
  border-radius: 100px;
}

.dark-blue input[type='radio']:checked + label span.radiobtn:after {
  content: "";
  position: absolute;
  top: 37px;
  right: 35px;
  width: 30px;
  height: 30px;
  background: #95a5a6;
  z-index: 1;
  border-radius: 30px;
}

.orange label span.checkbox {
  background: #ecf0f1;
  padding: 18px 13px 13px 13px;
  width: 74px !important;
  height: 69px !important;
}

.orange label span.checkbox svg {
  display: none;
}

.orange input[type='checkbox']:checked + label span.checkbox svg {
  display: block;
}

.orange input[type='radio'] + label span.radiobtn {
  background: #ecf0f1;
  border-radius: 100px;
}

.orange label span.radiobtn svg {
  display: none;
}

.orange input[type='radio']:checked + label span.radiobtn svg {
  display: block;
}

/*
Simple CSS reset
*/

* {
margin: 0;
padding: 0;
}

/*
CSS Styles for the upper navigation
*/
#navigation {
  width: 100%;
  height: 65px;
  background: rgb(240, 240, 240);
  margin: 0;
  border-bottom: 1px solid rgb(218, 218, 218);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.go-back {
  float: left;
  margin-top: 25px;
  margin-left: 10px;
}
.go-back a {
  text-decoration: none;
  font-size: 18px;
  color: rgb(116, 116, 116);
}
.go-back a:hover {
  color: rgb(70, 70, 70);
}
.article-title {
  float: left;
  margin-left: 50px;
  margin-top: 18px;
}
.article-title a {
  text-decoration: none;
  font-size: 25px;
  color: rgb(92, 92, 92);
}
.article-title a:hover {
  color: rgb(70, 70, 70);
}

$(function () {

    //array of colors to demonstrate the background filling effect
    var colors = ["#d35400","#c0392b","#2980b9","#f39c12","#34495e","#3498db"];

    //select random color from the color array
    var items = Math.floor(Math.random() * colors.length);
    var color = colors.splice(items, 1);

    //set a random color on document load
    $(".green input[type='checkbox']:checked + label span").css({"background-color":color});
    $(".green input[type='radio']:checked + label span").css({"background-color":color});

    //on click switch between background colors
    $(".green .checkbox").on("click", function(){
        if($(".green input[type='checkbox']").is(":checked")){
            $(".green input[type='checkbox']:checked + label span").css({"background-color":"#ecf0f1"});
        }else{
            $(".green input[type='checkbox'] + label span").css({"background-color":color});
        }
    });

});

This Pen is owned by 8bit code on CodePen.

See more by @8bitcode on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js