<header id="title">
  <h1><i class="ion-ios7-checkmark"></i> Super simple CSS custom checkbox</h1>
  <p>Works with radio buttons too.</p>
</header>








<input type="checkbox" id="myCheckbox"/>
<label for="myCheckbox">
  <i class="ion-ios7-checkmark"></i> Click me!
</label>

<h2>With checkbox visible so you can see how it reacts</h2>

<input type="checkbox" id="myCheckbox2"/>
<label for="myCheckbox2">
  <i class="ion-ios7-checkmark"></i> Click me!
</label>
@import "compass/css3";

body{
  text-align: center;
  font-family: sans-serif;
}
h2{
  text-transform: uppercase;
  margin: 4rem 0 2rem 0;
}







// HERE !

input[type="checkbox"]{
  display: none;
}
input[type="checkbox"]+label{
  transition: all 300ms ease;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 0.3rem;
  background-color: #ecf0f1;
  padding: 0.5rem 1rem;
  display: inline-block;
  
  // Suggested by @zizzo to prevent text selection
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  // ------------------------
  
  i{
    color: #bdc3c7;
  }
}
input[type="checkbox"]:checked+label{
  transition: all 300ms ease;
  background-color: #2ecc71;
  
  i{
    color: white;
    animation: check 1s;
  }
}


#myCheckbox2{
  display: inline;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css
  2. https://codepen.io/SebL/pen/90e4529e2d7cfd5f29168648d0dc1782.scss

External JavaScript

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