<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div>

/* Checkbox & Radio ============================ */ [type="checkbox"] + label { padding-left: 26px; height: 25px; line-height: 21px; font-size: 13px; font-weight: normal; } [type="checkbox"]:checked + label:before { top: -4px; left: -2px; width: 11px; height: 19px; } [type="checkbox"]:checked.chk-col-red + label:before { border-right: 2px solid #F44336; border-bottom: 2px solid #F44336; } [type="checkbox"]:checked.chk-col-pink + label:before { border-right: 2px solid #E91E63; border-bottom: 2px solid #E91E63; } [type="checkbox"]:checked.chk-col-purple + label:before { border-right: 2px solid #9C27B0; border-bottom: 2px solid #9C27B0; } [type="checkbox"]:checked.chk-col-deep-purple + label:before { border-right: 2px solid #673AB7; border-bottom: 2px solid #673AB7; } [type="checkbox"]:checked.chk-col-indigo + label:before { border-right: 2px solid #3F51B5; border-bottom: 2px solid #3F51B5; } [type="checkbox"]:checked.chk-col-blue + label:before { border-right: 2px solid #2196F3; border-bottom: 2px solid #2196F3; } [type="checkbox"]:checked.chk-col-light-blue + label:before { border-right: 2px solid #03A9F4; border-bottom: 2px solid #03A9F4; } [type="checkbox"]:checked.chk-col-cyan + label:before { border-right: 2px solid #00BCD4; border-bottom: 2px solid #00BCD4; } [type="checkbox"]:checked.chk-col-teal + label:before { border-right: 2px solid #009688; border-bottom: 2px solid #009688; } [type="checkbox"]:checked.chk-col-green + label:before { border-right: 2px solid #4CAF50; border-bottom: 2px solid #4CAF50; } [type="checkbox"]:checked.chk-col-light-green + label:before { border-right: 2px solid #8BC34A; border-bottom: 2px solid #8BC34A; } [type="checkbox"]:checked.chk-col-lime + label:before { border-right: 2px solid #CDDC39; border-bottom: 2px solid #CDDC39; } [type="checkbox"]:checked.chk-col-yellow + label:before { border-right: 2px solid #ffe821; border-bottom: 2px solid #ffe821; } [type="checkbox"]:checked.chk-col-amber + label:before { border-right: 2px solid #FFC107; border-bottom: 2px solid #FFC107; } [type="checkbox"]:checked.chk-col-orange + label:before { border-right: 2px solid #FF9800; border-bottom: 2px solid #FF9800; } [type="checkbox"]:checked.chk-col-deep-orange + label:before { border-right: 2px solid #FF5722; border-bottom: 2px solid #FF5722; } [type="checkbox"]:checked.chk-col-brown + label:before { border-right: 2px solid #795548; border-bottom: 2px solid #795548; } [type="checkbox"]:checked.chk-col-grey + label:before { border-right: 2px solid #9E9E9E; border-bottom: 2px solid #9E9E9E; } [type="checkbox"]:checked.chk-col-blue-grey + label:before { border-right: 2px solid #607D8B; border-bottom: 2px solid #607D8B; } [type="checkbox"]:checked.chk-col-black + label:before { border-right: 2px solid #000000; border-bottom: 2px solid #000000; } [type="checkbox"]:checked.chk-col-white + label:before { border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } [type="checkbox"].filled-in:checked + label:after { top: 0; width: 20px; height: 20px; border: 2px solid #26a69a; background-color: #26a69a; z-index: 0; } [type="checkbox"].filled-in:checked + label:before { border-right: 2px solid #fff !important; border-bottom: 2px solid #fff !important; } [type="checkbox"].filled-in:checked.chk-col-red + label:after { border: 2px solid #F44336; background-color: #F44336; } [type="checkbox"].filled-in:checked.chk-col-pink + label:after { border: 2px solid #E91E63; background-color: #E91E63; } [type="checkbox"].filled-in:checked.chk-col-purple + label:after { border: 2px solid #9C27B0; background-color: #9C27B0; } [type="checkbox"].filled-in:checked.chk-col-deep-purple + label:after { border: 2px solid #673AB7; background-color: #673AB7; } [type="checkbox"].filled-in:checked.chk-col-indigo + label:after { border: 2px solid #3F51B5; background-color: #3F51B5; } [type="checkbox"].filled-in:checked.chk-col-blue + label:after { border: 2px solid #2196F3; background-color: #2196F3; } [type="checkbox"].filled-in:checked.chk-col-light-blue + label:after { border: 2px solid #03A9F4; background-color: #03A9F4; } [type="checkbox"].filled-in:checked.chk-col-cyan + label:after { border: 2px solid #00BCD4; background-color: #00BCD4; } [type="checkbox"].filled-in:checked.chk-col-teal + label:after { border: 2px solid #009688; background-color: #009688; } [type="checkbox"].filled-in:checked.chk-col-green + label:after { border: 2px solid #4CAF50; background-color: #4CAF50; } [type="checkbox"].filled-in:checked.chk-col-light-green + label:after { border: 2px solid #8BC34A; background-color: #8BC34A; } [type="checkbox"].filled-in:checked.chk-col-lime + label:after { border: 2px solid #CDDC39; background-color: #CDDC39; } [type="checkbox"].filled-in:checked.chk-col-yellow + label:after { border: 2px solid #ffe821; background-color: #ffe821; } [type="checkbox"].filled-in:checked.chk-col-amber + label:after { border: 2px solid #FFC107; background-color: #FFC107; } [type="checkbox"].filled-in:checked.chk-col-orange + label:after { border: 2px solid #FF9800; background-color: #FF9800; } [type="checkbox"].filled-in:checked.chk-col-deep-orange + label:after { border: 2px solid #FF5722; background-color: #FF5722; } [type="checkbox"].filled-in:checked.chk-col-brown + label:after { border: 2px solid #795548; background-color: #795548; } [type="checkbox"].filled-in:checked.chk-col-grey + label:after { border: 2px solid #9E9E9E; background-color: #9E9E9E; } [type="checkbox"].filled-in:checked.chk-col-blue-grey + label:after { border: 2px solid #607D8B; background-color: #607D8B; } [type="checkbox"].filled-in:checked.chk-col-black + label:after { border: 2px solid #000000; background-color: #000000; } [type="checkbox"].filled-in:checked.chk-col-white + label:after { border: 2px solid #ffffff; background-color: #ffffff; } [type="radio"]:not(:checked) + label { padding-left: 26px; height: 25px; line-height: 25px; font-size: 13px; font-weight: normal; } [type="radio"]:checked + label { padding-left: 26px; height: 25px; line-height: 25px; font-size: 13px; font-weight: normal; } [type="radio"].radio-col-red:checked + label:after { background-color: #F44336; border-color: #F44336; } [type="radio"].radio-col-pink:checked + label:after { background-color: #E91E63; border-color: #E91E63; } [type="radio"].radio-col-purple:checked + label:after { background-color: #9C27B0; border-color: #9C27B0; } [type="radio"].radio-col-deep-purple:checked + label:after { background-color: #673AB7; border-color: #673AB7; } [type="radio"].radio-col-indigo:checked + label:after { background-color: #3F51B5; border-color: #3F51B5; } [type="radio"].radio-col-blue:checked + label:after { background-color: #2196F3; border-color: #2196F3; } [type="radio"].radio-col-light-blue:checked + label:after { background-color: #03A9F4; border-color: #03A9F4; } [type="radio"].radio-col-cyan:checked + label:after { background-color: #00BCD4; border-color: #00BCD4; } [type="radio"].radio-col-teal:checked + label:after { background-color: #009688; border-color: #009688; } [type="radio"].radio-col-green:checked + label:after { background-color: #4CAF50; border-color: #4CAF50; } [type="radio"].radio-col-light-green:checked + label:after { background-color: #8BC34A; border-color: #8BC34A; } [type="radio"].radio-col-lime:checked + label:after { background-color: #CDDC39; border-color: #CDDC39; } [type="radio"].radio-col-yellow:checked + label:after { background-color: #ffe821; border-color: #ffe821; } [type="radio"].radio-col-amber:checked + label:after { background-color: #FFC107; border-color: #FFC107; } [type="radio"].radio-col-orange:checked + label:after { background-color: #FF9800; border-color: #FF9800; } [type="radio"].radio-col-deep-orange:checked + label:after { background-color: #FF5722; border-color: #FF5722; } [type="radio"].radio-col-brown:checked + label:after { background-color: #795548; border-color: #795548; } [type="radio"].radio-col-grey:checked + label:after { background-color: #9E9E9E; border-color: #9E9E9E; } [type="radio"].radio-col-blue-grey:checked + label:after { background-color: #607D8B; border-color: #607D8B; } [type="radio"].radio-col-black:checked + label:after { background-color: #000000; border-color: #000000; } [type="radio"].radio-col-white:checked + label:after { background-color: #ffffff; border-color: #ffffff; } [type="radio"].with-gap.radio-col-red:checked + label:before { border: 2px solid #F44336; } [type="radio"].with-gap.radio-col-red:checked + label:after { background-color: #F44336; border: 2px solid #F44336; } [type="radio"].with-gap.radio-col-pink:checked + label:before { border: 2px solid #E91E63; } [type="radio"].with-gap.radio-col-pink:checked + label:after { background-color: #E91E63; border: 2px solid #E91E63; } [type="radio"].with-gap.radio-col-purple:checked + label:before { border: 2px solid #9C27B0; } [type="radio"].with-gap.radio-col-purple:checked + label:after { background-color: #9C27B0; border: 2px solid #9C27B0; } [type="radio"].with-gap.radio-col-deep-purple:checked + label:before { border: 2px solid #673AB7; } [type="radio"].with-gap.radio-col-deep-purple:checked + label:after { background-color: #673AB7; border: 2px solid #673AB7; } [type="radio"].with-gap.radio-col-indigo:checked + label:before { border: 2px solid #3F51B5; } [type="radio"].with-gap.radio-col-indigo:checked + label:after { background-color: #3F51B5; border: 2px solid #3F51B5; } [type="radio"].with-gap.radio-col-blue:checked + label:before { border: 2px solid #2196F3; } [type="radio"].with-gap.radio-col-blue:checked + label:after { background-color: #2196F3; border: 2px solid #2196F3; } [type="radio"].with-gap.radio-col-light-blue:checked + label:before { border: 2px solid #03A9F4; } [type="radio"].with-gap.radio-col-light-blue:checked + label:after { background-color: #03A9F4; border: 2px solid #03A9F4; } [type="radio"].with-gap.radio-col-cyan:checked + label:before { border: 2px solid #00BCD4; } [type="radio"].with-gap.radio-col-cyan:checked + label:after { background-color: #00BCD4; border: 2px solid #00BCD4; } [type="radio"].with-gap.radio-col-teal:checked + label:before { border: 2px solid #009688; } [type="radio"].with-gap.radio-col-teal:checked + label:after { background-color: #009688; border: 2px solid #009688; } [type="radio"].with-gap.radio-col-green:checked + label:before { border: 2px solid #4CAF50; } [type="radio"].with-gap.radio-col-green:checked + label:after { background-color: #4CAF50; border: 2px solid #4CAF50; } [type="radio"].with-gap.radio-col-light-green:checked + label:before { border: 2px solid #8BC34A; } [type="radio"].with-gap.radio-col-light-green:checked + label:after { background-color: #8BC34A; border: 2px solid #8BC34A; } [type="radio"].with-gap.radio-col-lime:checked + label:before { border: 2px solid #CDDC39; } [type="radio"].with-gap.radio-col-lime:checked + label:after { background-color: #CDDC39; border: 2px solid #CDDC39; } [type="radio"].with-gap.radio-col-yellow:checked + label:before { border: 2px solid #ffe821; } [type="radio"].with-gap.radio-col-yellow:checked + label:after { background-color: #ffe821; border: 2px solid #ffe821; } [type="radio"].with-gap.radio-col-amber:checked + label:before { border: 2px solid #FFC107; } [type="radio"].with-gap.radio-col-amber:checked + label:after { background-color: #FFC107; border: 2px solid #FFC107; } [type="radio"].with-gap.radio-col-orange:checked + label:before { border: 2px solid #FF9800; } [type="radio"].with-gap.radio-col-orange:checked + label:after { background-color: #FF9800; border: 2px solid #FF9800; } [type="radio"].with-gap.radio-col-deep-orange:checked + label:before { border: 2px solid #FF5722; } [type="radio"].with-gap.radio-col-deep-orange:checked + label:after { background-color: #FF5722; border: 2px solid #FF5722; } [type="radio"].with-gap.radio-col-brown:checked + label:before { border: 2px solid #795548; } [type="radio"].with-gap.radio-col-brown:checked + label:after { background-color: #795548; border: 2px solid #795548; } [type="radio"].with-gap.radio-col-grey:checked + label:before { border: 2px solid #9E9E9E; } [type="radio"].with-gap.radio-col-grey:checked + label:after { background-color: #9E9E9E; border: 2px solid #9E9E9E; } [type="radio"].with-gap.radio-col-blue-grey:checked + label:before { border: 2px solid #607D8B; } [type="radio"].with-gap.radio-col-blue-grey:checked + label:after { background-color: #607D8B; border: 2px solid #607D8B; } [type="radio"].with-gap.radio-col-black:checked + label:before { border: 2px solid #000000; } [type="radio"].with-gap.radio-col-black:checked + label:after { background-color: #000000; border: 2px solid #000000; } [type="radio"].with-gap.radio-col-white:checked + label:before { border: 2px solid #ffffff; } [type="radio"].with-gap.radio-col-white:checked + label:after { background-color: #ffffff; border: 2px solid #ffffff; }