Label + Checkbox css custom style

index.html

<div class="demo-container-main">
  <div class="demo-container-title">
    Checkbox + Radiobox
  </div>
  <div class="demo-container-inside">
    <div class="demo-container-input">
      <label>
        <input type="checkbox" />
        <span> Checkbox label here</span>
      </label>
    </div>
    <div class="demo-container-input">
      <label>
        <input type="checkbox" checked />
        <span> Checked checkbox label here</span>
      </label>
    </div>
    <div class="demo-container-input">
      <label>
        <input type="radio" name="test" checked />
        <span>Checked radiobox label here</span>
      </label>
    </div>
    <div class="demo-container-input">
      <label>
        <input type="radio" name="test" />
        <span>Radiobox label here</span>
      </label>
    </div>
    <div class="demo-container-input">
      <label>
        <input type="radio" name="test" />
        <span>Radiobox2 label here</span>
      </label>
    </div>
  </div>
</div>  

Label-+-Checkbox-css-custom-style.markdown

Label + Checkbox css custom style

A Pen by SelenGora on CodePen.

License.

style.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

@mixin user-select($select) {
	-webkit-touch-callout: $select; // Android & iPhone
	  -webkit-user-select: $select;
	   -khtml-user-select: $select;
		 -moz-user-select: $select;
		  -ms-user-select: $select; // IE10+
			  user-select: $select;
}

$page-color: #6C7068;
$page-base-font: 1em;
$page-font-family: 'Open Sans', sans-serif;
$input-checked-color :#A3465B;

body {
  font-family: $page-font-family;
  font-size: $page-base-font; // 16px
  background: url(http://subtlepatterns.com/patterns/geometry.png) repeat;
  color: $page-color;

}

.demo-container-main {
  width: 20em;
  margin: 10em auto;
 
  background : #fff;
  border-bottom: .313em solid $input-checked-color;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  
  .demo-container-title{
    color: #fff;
    background: $input-checked-color;
    padding: 1em;
  }
  .demo-container-inside {
    padding: 1em;
  }
}


/* Check Icons  */
@font-face {
	font-family: 'material-icons';
	src: url('http://www.selengora.com/fonts/material-icons.eot');
}
@font-face {
	font-family: 'material-icons';
	src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SAy0AAAC8AAAAYGNtYXAaVcxaAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zks4mNoAAAFwAAACBGhlYWQFFRLyAAADdAAAADZoaGVhB20DyQAAA6wAAAAkaG10eBIAAaoAAAPQAAAAIGxvY2EBmgEKAAAD8AAAABJtYXhwAAwAQQAABAQAAAAgbmFtZZOyasMAAAQkAAABhHBvc3QAAwAAAAAFqAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYD//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgCAACsDgAMrABAAFwAAASEiBhURFBYzITI2NRE0JiMBJzcXARcBAyv9qiMyMiMCViMyMiP+gNY8mgFEPP6AAysyJP2rIzIyIwJVJDL9qtY8mQFEPf6AAAIAgAArA4ADKwAEABUAAAERIREhNSEiBhURFBYzITI2NRE0JiMDK/2qAlb9qiMyMiMCViMyMiMC1f2rAlVWMiT9qyMyMiMCVSQyAAACAFUAAAOrA1UAFAApAAABIg4CFRQeAjMyPgI1NC4CIxEiLgI1ND4CMzIeAhUUDgIjAgBYnHRDQ3ScWFicdENDdJxYR3xdNTVdfEdHfF01NV18RwNVQ3SbWFmbdENDdJtZWJt0Q/0ANl18R0Z9XDY2XH1GR3xdNgADAFUAAAOrA1UAFAApAD4AAAEiDgIVFB4CMzI+AjU0LgIjNSIOAhUUHgIzMj4CNTQuAiMRIi4CNTQ+AjMyHgIVFA4CIwIALE46ISE6TiwsTjohITpOLFicdENDdJxYWJx0Q0N0nFhHfF01NV18R0d8XTU1XXxHAoAiOU4sLE46IiI6TiwsTjki1UN0m1hZm3RDQ3SbWVibdEP9ADZdfEdGfVw2Nlx9Rkd8XTYAAQAAAAEAAO06OXtfDzz1AAsEAAAAAADRJedQAAAAANEl51AAAAAAA6sDVQAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADqwABAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAIAAAAEAACABAAAgAQAAFUEAABVAAAAAAAKABQAHgBKAHAArAECAAAAAQAAAAgAPwADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABABwAAAABAAAAAAACAA4AeAABAAAAAAADABwAMgABAAAAAAAEABwAhgABAAAAAAAFABYAHAABAAAAAAAGAA4ATgABAAAAAAAKADQAogADAAEECQABABwAAAADAAEECQACAA4AeAADAAEECQADABwAMgADAAEECQAEABwAhgADAAEECQAFABYAHAADAAEECQAGABwAXAADAAEECQAKADQAogBtAGEAdABlAHIAaQBhAGwALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAG0AYQB0AGUAcgBpAGEAbAAtAGkAYwBvAG4Ac21hdGVyaWFsLWljb25zAG0AYQB0AGUAcgBpAGEAbAAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAG0AYQB0AGUAcgBpAGEAbAAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'),
		 url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'material-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-check-box:before {
	content: "\e600";
}
.icon-check-box-outline-blank:before {
	content: "\e601";
}
.icon-radio-button-off:before {
	content: "\e602";
}
.icon-radio-button-on:before {
	content: "\e603";
}


/* Input Styles starts here */

label {
  position: relative;
  /*padding-left: 1.563em;*/
  @include user-select(none);
 
}

label, 
input[type="checkbox"] {
    cursor: pointer;
}

input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked,
input[type="radio"]:not(:checked),
input[type="radio"]:checked {
	position: absolute;
  left: 0;
  visibility: hidden;
  color: $page-color;
}

label input[type="checkbox"] + span,
label input[type="radio"] + span {
    display: inline-block;
    padding-left: 1.250em;
  
    &::after,
    &::before {
    visibility: visible;
    font-family: 'material-icons';
    font-size: 1.125em;
    display: inline-block;
    position: absolute;
    left:0;

    }
}

label input[type="checkbox"]:not(:checked) + span {
    &::before {
      content: '\e601';
    }
}

label input[type="checkbox"]:checked + span { 
    &::after {
      content: '\e600';
      color: $input-checked-color;
      
    } 
}

label input[type="radio"]:not(:checked) + span {
    &::before {
      content: '\e602';
    }
}

label input[type="radio"]:checked + span { 
    &::after {
      content: '\e603';
      color: $input-checked-color;
    } 
}