Fancy Checkboxes and Radio Buttons with Font Awesome

Fancy Checkboxes and Radio buttons are developed using HTML, CSS, Javascript and font Awesome. Starting with well-formed HTML, look what we can do with a bit of style and some Font Awesome glyphs

Include Font Awesome

<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.2.0/css/all.css'>

HTML Snippet

<main class="fancy">   <section class="demo">     <div class="box">       <h3>Checkbox <br /><small>(Multi-select)</small></h3>       <p>         <label for="Cookies">           <input id="Cookies" name="yaybox" type="checkbox" value="Cookies" checked />           <span>Chocolate Chip Cookies</span>         </label>       </p>       <p>         <label for="Milk">           <input id="Milk" name="yaybox" type="checkbox" value="Milk" />           <span>Ice Cold Milk</span>         </label>       </p>        <p>         <label for="Other">           <input id="Other" name="yaybox" type="checkbox" value="Other" />           <span>Raspberry-Lemon Pastry with Cream Cheese Frosting and Graham Cracker Crust</span>         </label>       </p>        <hr />        <h3>Radio Button <br /><small>(Single-select)</small></h3>       <p>         <label for="Chocolate">           <input id="Chocolate" name="yaydio" type="radio" value="Chocolate" />           <span>Chocolate Candies</span>         </label>       </p>       <p>         <label for="Strawberry">           <input id="Strawberry" name="yaydio" type="radio" value="Strawberry" />           <span>Strawberry Jelly</span>         </label>       </p>       <p>         <label for="Vanilla">           <input id="Vanilla" name="yaydio" type="radio" value="Vanilla" checked />           <span>Vanilla Ice Cream</span>         </label>       </p>     </div>   </section>      <section class="controls">     <div>       <p>         <label for="sim">           <input id="sim" name="sim" type="checkbox" value="sim" checked onchange="toggleTheFancy()" />           <span>Toggle The Fanciness</span>         </label>       </p>       <p>         <label for="square">           <input id="square" name="square" type="checkbox" value="square" onchange="toggleTheShape()" />           <span>Square Checkboxes</span>         </label>       </p>       <p>         <small>Change width to force line-<br />wrapping. Notice the text alignment!</small><br />         <label for="slider">           <input id="slider" type="range" min="5" max="100" value="100" oninput="setProperty('--demo-width', this.value)" />         </label>       </p>     </div>   </section> </main>

CSS Code

@charset "UTF-8"; .fancy label {   display: inline-flex;   align-items: baseline; } .fancy label input[type=checkbox], .fancy label input[type=radio] {   position: relative;   -webkit-appearance: none;      -moz-appearance: none;           appearance: none;   font-size: inherit;   width: 1em;   margin: 0;   color: inherit;   outline: none;   font-family: 'Font Awesome 5 Pro';   transition: 300ms ease-out; } .fancy label input[type=checkbox]::after, .fancy label input[type=radio]::after {   content: '\f111';   display: inline-block;   text-align: center;   width: 1em; } .fancy label input[type=checkbox]:checked::after, .fancy label input[type=radio]:checked::after {   font-weight: 900; } .fancy label input[type=checkbox]:active, .fancy label input[type=radio]:active {   -webkit-transform: scale(0.6);           transform: scale(0.6); } .fancy label input[type=checkbox] + span, .fancy label input[type=radio] + span {   margin-left: .35em; } .fancy label input[type=checkbox]:checked::after {   content: '\f058'; } .fancy label input[type=radio]:checked::after {   content: '\f192'; }  .fancy.square label input[type=checkbox]:after {   content: '\f0c8'; } .fancy.square label input[type=checkbox]:checked::after {   content: '\f14a'; }   :root {   --demo-width: 30; }  body {   margin: 0;   min-height: 100vh;   font-size: calc(1vmax + .5em);   line-height: 1.4;   font-family: sans-serif;   display: flex; } body main {   flex: 1;   display: flex;   flex-direction: row;   align-items: baseline;   padding: 0em; } body main section {   flex: 1;   padding: 2em;   display: flex;   align-items: center;   justify-content: center; } body main section + section {   flex: none;   padding: 1em;   margin: 2em;   background: #1fc2f5;   color: #fff;   cursor: pointer;   transition: font-size 100ms ease-out;   border-radius: .5em; }  .box {   position: relative;   width: calc(var(--demo-width) * 1%);   border: 1px dashed #ccc;   padding: 1em;   margin: -.5em;   border-radius: .3em; } .box::after {   font-size: .8em;   position: absolute;   top: 0;   left: 50%;   -webkit-transform: translate(-50%, -50%);           transform: translate(-50%, -50%);   background: #fff;   border: 1px dashed #ccc;   padding: 0 .65em;   border-radius: 1em;   counter-reset: dw var(--demo-width);   content: counter(dw) "%"; }  h3 {   margin: 0 0 .5em 0; }  p {   margin: 0 0 1em 0; }  hr {   border: 1px dashed #ccc;   height: 0;   margin: 1em 0; }  .fancy label input[type="range"] {   -webkit-appearance: none;      -moz-appearance: none;           appearance: none;   outline: none;   display: block;   padding: 0;   border: 0;   width: auto;   height: .25em;   border-radius: 1em;   cursor: pointer;   font-size: inherit; } .fancy label input[type="range"]::-moz-range-track {   -moz-appearance: none;        appearance: none;   background: #fff;   outline: none; } .fancy label input[type="range"]::-moz-focus-outer {   border: 0; } .fancy label input[type="range"]::-moz-range-thumb {   -moz-appearance: none;        appearance: none;   width: 1em;   height: 1em;   border: none;   box-shadow: 0 0 0 .2em #1fc2f5;   border-radius: 1em;   background: #fff;   transform: scale(0.7);   transition: .3s ease-out; } .fancy label input[type="range"]::-moz-range-thumb:focus, .fancy label input[type="range"]::-moz-range-thumb:active {   -moz-appearance: none;        appearance: none;   transform: scale(1.5); } .fancy label input[type="range"]::-webkit-slider-thumb {   -webkit-appearance: none;           appearance: none;   width: 1em;   height: 1em;   border: none;   box-shadow: 0 0 0 .2em #1fc2f5;   border-radius: 1em;   background: #fff;   -webkit-transform: scale(0.8);           transform: scale(0.8);   transition: .3s ease-out; } .fancy label input[type="range"]::-webkit-slider-thumb:focus, .fancy label input[type="range"]::-webkit-slider-thumb:active {   -webkit-appearance: none;           appearance: none;   -webkit-transform: scale(1.1);           transform: scale(1.1); }

JavaScript Code

// Simulation controls to illustrate differences // This is not relevant to the implementing the fanciness const element = document.querySelector('main') // slider communication const setProperty = (property, value) => document.body.style.setProperty(property, value) // fanciness on/off const toggleTheFancy = () => element.classList.toggle('fancy') // shape shifting const toggleTheShape = () => element.classList.toggle('square')  setProperty('--demo-width', 100)

Preview

See the Pen Fancy Checkboxes and Radio Buttons — with Font Awesome by Jase (@jasesmith) on CodePen.