ThemeForest best selling themes

Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

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

Demo Download

Author Jase
Hits
Official Page: Go to website
Created AUGUST 23, 2018
License Open
Compatible browsers Chrome, Firefox, Opera, Safari

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';
}

/* demo layout â not relevant to the fanciness */
: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.

Advertisement