<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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"> <div class="col-auto mx-auto"> Custom radio and checkbox buttons.<br> <strong>3</strong> sizes (SM, MD, LG) | <strong>25</strong> color styles </div> </div> <div class="row"> <div class="col-12"> <div class="row"> <div class="col-12"> <h4>Radios with slight label's background</h4> </div> <div class="col-4"> <div class="funkyradio-default"> <div class="funkyradio-sm"> <input type="radio" name="radio-sm" id="radio-sm-0" value="1"> <label for="radio-sm-0">Radio SM default</label> </div> </div> <div class="funkyradio-primary"> <div class="funkyradio-sm"> <input type="radio" name="radio-sm" id="radio-sm-1" value="1"> <label for="radio-sm-1">Radio SM primary</label> </div> </div> <div class="funkyradio-secondary"> <div class="funkyradio-sm"> <input type="radio" name="radio-sm" id="radio-sm-2" value="1"> <label for="radio-sm-2">Radio SM secondary</label> </div> </div> <div class="funkyradio-success"> <div class="funkyradio-sm"> <input type="radio" name="radio-sm" id="radio-sm-3" value="1"> <label for="radio-sm-3">Radio SM success</label> </div> </div> <div class="funkyradio-danger"> <div class="funkyradio-sm"> <input type="radio" name="radio-sm" id="radio-sm-4" value="1"> <label for="radio-sm-4">Radio SM danger</label> </div> </div> <div class="funkyradio-warning"> <div class="funkyradio-sm"> <input type="radio" name="radio-sm" id="radio-sm-5" value="1"> <label for="radio-sm-5">Radio SM warning</label> </div> </div> <div class="funkyradio-info"> <div class="funkyradio-sm"> <input type="radio" name="radio-sm" id="radio-sm-6" value="1"> <label for="radio-sm-6">Radio SM info</label> </div> </div> </div> <div class="col-4"> <div class="funkyradio-default"> <div class="funkyradio-md"> <input type="radio" name="radio-md" id="radio-md-0" value="1"> <label for="radio-md-0">Radio MD default</label> </div> </div> <div class="funkyradio-primary"> <div class="funkyradio-md"> <input type="radio" name="radio-md" id="radio-md-1" value="1"> <label for="radio-md-1">Radio MD primary</label> </div> </div> <div class="funkyradio-secondary"> <div class="funkyradio-md"> <input type="radio" name="radio-md" id="radio-md-2" value="1"> <label for="radio-md-2">Radio MD secondary</label> </div> </div> <div class="funkyradio-success"> <div class="funkyradio-md"> <input type="radio" name="radio-md" id="radio-md-3" value="1"> <label for="radio-md-3">Radio MD success</label> </div> </div> <div class="funkyradio-danger"> <div class="funkyradio-md"> <input type="radio" name="radio-md" id="radio-md-4" value="1"> <label for="radio-md-4">Radio MD danger</label> </div> </div> <div class="funkyradio-warning"> <div class="funkyradio-md"> <input type="radio" name="radio-md" id="radio-md-5" value="1"> <label for="radio-md-5">Radio MD warning</label> </div> </div> <div class="funkyradio-info"> <div class="funkyradio-md"> <input type="radio" name="radio-md" id="radio-md-6" value="1"> <label for="radio-md-6">Radio MD info</label> </div> </div> </div> <div class="col-4"> <div class="funkyradio-default"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-0" value="1"> <label for="radio-0">Radio default</label> </div> </div> <div class="funkyradio-primary"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-1" value="1"> <label for="radio-1">Radio primary</label> </div> </div> <div class="funkyradio-secondary"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-2" value="1"> <label for="radio-2">Radio secondary</label> </div> </div> <div class="funkyradio-success"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-3" value="1"> <label for="radio-3">Radio success</label> </div> </div> <div class="funkyradio-danger"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-4" value="1"> <label for="radio-4">Radio danger</label> </div> </div> <div class="funkyradio-warning"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-5" value="1"> <label for="radio-5">Radio warning</label> </div> </div> <div class="funkyradio-info"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-6" value="1"> <label for="radio-6">Radio info</label> </div> </div> </div> </div> </div> <div class="col-12"> <div class="row"> <div class="col-12"> <h4>Checkboxes with slight label's background</h4> </div> <div class="col-4"> <div class="funkyradio-default"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-sm" id="checkbox-sm-0" value="1"> <label for="checkbox-sm-0">CBX SM default</label> </div> </div> <div class="funkyradio-primary"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-sm" id="checkbox-sm-1" value="1"> <label for="checkbox-sm-1">CBX SM primary</label> </div> </div> <div class="funkyradio-secondary"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-sm" id="checkbox-sm-2" value="1"> <label for="checkbox-sm-2">CBX SM secondary</label> </div> </div> <div class="funkyradio-success"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-sm" id="checkbox-sm-3" value="1"> <label for="checkbox-sm-3">CBX SM success</label> </div> </div> <div class="funkyradio-danger"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-sm" id="checkbox-sm-4" value="1"> <label for="checkbox-sm-4">CBX SM danger</label> </div> </div> <div class="funkyradio-warning"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-sm" id="checkbox-sm-5" value="1"> <label for="checkbox-sm-5">CBX SM warning</label> </div> </div> <div class="funkyradio-info"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-sm" id="checkbox-sm-6" value="1"> <label for="checkbox-sm-6">CBX SM info</label> </div> </div> </div> <div class="col-4"> <div class="funkyradio-default"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-md" id="checkbox-md-0" value="1"> <label for="checkbox-md-0">CBX MD default</label> </div> </div> <div class="funkyradio-primary"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-md" id="checkbox-md-1" value="1"> <label for="checkbox-md-1">CBX MD primary</label> </div> </div> <div class="funkyradio-secondary"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-md" id="checkbox-md-2" value="1"> <label for="checkbox-md-2">CBX MD secondary</label> </div> </div> <div class="funkyradio-success"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-md" id="checkbox-md-3" value="1"> <label for="checkbox-md-3">CBX MD success</label> </div> </div> <div class="funkyradio-danger"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-md" id="checkbox-md-4" value="1"> <label for="checkbox-md-4">CBX MD danger</label> </div> </div> <div class="funkyradio-warning"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-md" id="checkbox-md-5" value="1"> <label for="checkbox-md-5">CBX MD warning</label> </div> </div> <div class="funkyradio-info"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-md" id="checkbox-md-6" value="1"> <label for="checkbox-md-6">CBX MD info</label> </div> </div> </div> <div class="col-4"> <div class="funkyradio-default"> <div class="funkyradio"> <input type="checkbox" name="checkbox" id="checkbox-0" value="1"> <label for="checkbox-0">CBX default</label> </div> </div> <div class="funkyradio-primary"> <div class="funkyradio"> <input type="checkbox" name="checkbox" id="checkbox-1" value="1"> <label for="checkbox-1">CBX primary</label> </div> </div> <div class="funkyradio-secondary"> <div class="funkyradio"> <input type="checkbox" name="checkbox" id="checkbox-2" value="1"> <label for="checkbox-2">CBX secondary</label> </div> </div> <div class="funkyradio-success"> <div class="funkyradio"> <input type="checkbox" name="checkbox" id="checkbox-3" value="1"> <label for="checkbox-3">CBX success</label> </div> </div> <div class="funkyradio-danger"> <div class="funkyradio"> <input type="checkbox" name="checkbox" id="checkbox-4" value="1"> <label for="checkbox-4">CBX danger</label> </div> </div> <div class="funkyradio-warning"> <div class="funkyradio"> <input type="checkbox" name="checkbox" id="checkbox-5" value="1"> <label for="checkbox-5">CBX warning</label> </div> </div> <div class="funkyradio-info"> <div class="funkyradio"> <input type="checkbox" name="checkbox" id="checkbox-6" value="1"> <label for="checkbox-6">CBX info</label> </div> </div> </div> </div> </div> <div class="w-100 py-2"></div> <div class="col-12"> <div class="row"> <div class="col-12"> <h4>Radios with transparent label's background</h4> </div> <div class="col-4"> <div class="funkyradio-default funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="radio" name="radio-nobg-sm" id="radio-nobg-sm-0" value="1"> <label for="radio-nobg-sm-0">Radio SM default</label> </div> </div> <div class="funkyradio-primary funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="radio" name="radio-nobg-sm" id="radio-nobg-sm-1" value="1"> <label for="radio-nobg-sm-1">Radio SM primary</label> </div> </div> <div class="funkyradio-secondary funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="radio" name="radio-nobg-sm" id="radio-nobg-sm-2" value="1"> <label for="radio-nobg-sm-2">Radio SM secondary</label> </div> </div> <div class="funkyradio-success funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="radio" name="radio-nobg-sm" id="radio-nobg-sm-3" value="1"> <label for="radio-nobg-sm-3">Radio SM success</label> </div> </div> <div class="funkyradio-danger funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="radio" name="radio-nobg-sm" id="radio-nobg-sm-4" value="1"> <label for="radio-nobg-sm-4">Radio SM danger</label> </div> </div> <div class="funkyradio-warning funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="radio" name="radio-nobg-sm" id="radio-nobg-sm-5" value="1"> <label for="radio-nobg-sm-5">Radio SM warning</label> </div> </div> <div class="funkyradio-info funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="radio" name="radio-nobg-sm" id="radio-nobg-sm-6" value="1"> <label for="radio-nobg-sm-6">Radio SM info</label> </div> </div> </div> <div class="col-4"> <div class="funkyradio-default funkyradio-NOBG"> <div class="funkyradio-md"> <input type="radio" name="radio-nobg-md" id="radio-nobg-md-0" value="1"> <label for="radio-nobg-md-0">Radio MD default</label> </div> </div> <div class="funkyradio-primary funkyradio-NOBG"> <div class="funkyradio-md"> <input type="radio" name="radio-nobg-md" id="radio-nobg-md-1" value="1"> <label for="radio-nobg-md-1">Radio MD primary</label> </div> </div> <div class="funkyradio-secondary funkyradio-NOBG"> <div class="funkyradio-md"> <input type="radio" name="radio-nobg-md" id="radio-nobg-md-2" value="1"> <label for="radio-nobg-md-2">Radio MD secondary</label> </div> </div> <div class="funkyradio-success funkyradio-NOBG"> <div class="funkyradio-md"> <input type="radio" name="radio-nobg-md" id="radio-nobg-md-3" value="1"> <label for="radio-nobg-md-3">Radio MD success</label> </div> </div> <div class="funkyradio-danger funkyradio-NOBG"> <div class="funkyradio-md"> <input type="radio" name="radio-nobg-md" id="radio-nobg-md-4" value="1"> <label for="radio-nobg-md-4">Radio MD danger</label> </div> </div> <div class="funkyradio-warning funkyradio-NOBG"> <div class="funkyradio-md"> <input type="radio" name="radio-nobg-md" id="radio-nobg-md-5" value="1"> <label for="radio-nobg-md-5">Radio MD warning</label> </div> </div> <div class="funkyradio-info funkyradio-NOBG"> <div class="funkyradio-md"> <input type="radio" name="radio-nobg-md" id="radio-nobg-md-6" value="1"> <label for="radio-nobg-md-6">Radio MD info</label> </div> </div> </div> <div class="col-4"> <div class="funkyradio-default funkyradio-NOBG"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-nobg-0" value="1"> <label for="radio-nobg-0">Radio default</label> </div> </div> <div class="funkyradio-primary funkyradio-NOBG"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-nobg-1" value="1"> <label for="radio-nobg-1">Radio primary</label> </div> </div> <div class="funkyradio-secondary funkyradio-NOBG"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-nobg-2" value="1"> <label for="radio-nobg-2">Radio secondary</label> </div> </div> <div class="funkyradio-success funkyradio-NOBG"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-nobg-3" value="1"> <label for="radio-nobg-3">Radio success</label> </div> </div> <div class="funkyradio-danger funkyradio-NOBG"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-nobg-4" value="1"> <label for="radio-nobg-4">Radio danger</label> </div> </div> <div class="funkyradio-warning funkyradio-NOBG"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-nobg-5" value="1"> <label for="radio-nobg-5">Radio warning</label> </div> </div> <div class="funkyradio-info funkyradio-NOBG"> <div class="funkyradio"> <input type="radio" name="radio" id="radio-nobg-6" value="1"> <label for="radio-nobg-6">Radio info</label> </div> </div> </div> </div> </div> <div class="col-12"> <div class="row"> <div class="col-12"> <h4>Checkboxes with transparent label's background</h4> </div> <div class="col-4"> <div class="funkyradio-default funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-nobg-sm" id="checkbox-nobg-sm-0" value="1"> <label for="checkbox-nobg-sm-0">CBX SM default</label> </div> </div> <div class="funkyradio-primary funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-nobg-sm" id="checkbox-nobg-sm-1" value="1"> <label for="checkbox-nobg-sm-1">CBX SM primary</label> </div> </div> <div class="funkyradio-secondary funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-nobg-sm" id="checkbox-nobg-sm-2" value="1"> <label for="checkbox-nobg-sm-2">CBX SM secondary</label> </div> </div> <div class="funkyradio-success funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-nobg-sm" id="checkbox-nobg-sm-3" value="1"> <label for="checkbox-nobg-sm-3">CBX SM success</label> </div> </div> <div class="funkyradio-danger funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-nobg-sm" id="checkbox-nobg-sm-4" value="1"> <label for="checkbox-nobg-sm-4">CBX SM danger</label> </div> </div> <div class="funkyradio-warning funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-nobg-sm" id="checkbox-nobg-sm-5" value="1"> <label for="checkbox-nobg-sm-5">CBX SM warning</label> </div> </div> <div class="funkyradio-info funkyradio-NOBG"> <div class="funkyradio-sm"> <input type="checkbox" name="checkbox-nobg-sm" id="checkbox-nobg-sm-6" value="1"> <label for="checkbox-nobg-sm-6">CBX SM info</label> </div> </div> </div> <div class="col-4"> <div class="funkyradio-default funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-nobg-md" id="checkbox-nobg-md-0" value="1"> <label for="checkbox-nobg-md-0">CBX MD default</label> </div> </div> <div class="funkyradio-primary funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-nobg-md" id="checkbox-nobg-md-1" value="1"> <label for="checkbox-nobg-md-1">CBX MD primary</label> </div> </div> <div class="funkyradio-secondary funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-nobg-md" id="checkbox-nobg-md-2" value="1"> <label for="checkbox-nobg-md-2">CBX MD secondary</label> </div> </div> <div class="funkyradio-success funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-nobg-md" id="checkbox-nobg-md-3" value="1"> <label for="checkbox-nobg-md-3">CBX MD success</label> </div> </div> <div class="funkyradio-danger funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-nobg-md" id="checkbox-nobg-md-4" value="1"> <label for="checkbox-nobg-md-4">CBX MD danger</label> </div> </div> <div class="funkyradio-warning funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-nobg-md" id="checkbox-nobg-md-5" value="1"> <label for="checkbox-nobg-md-5">CBX MD warning</label> </div> </div> <div class="funkyradio-info funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="checkbox-nobg-md" id="checkbox-nobg-md-6" value="1"> <label for="checkbox-nobg-md-6">CBX MD info</label> </div> </div> </div> <div class="col-4"> <div class="funkyradio-default funkyradio-NOBG"> <div class="funkyradio"> <input type="checkbox" name="checkbox2" id="checkbox-nobg-0" value="1"> <label for="checkbox-nobg-0">CBX default</label> </div> </div> <div class="funkyradio-primary funkyradio-NOBG"> <div class="funkyradio"> <input type="checkbox" name="checkbox2" id="checkbox-nobg-1" value="1"> <label for="checkbox-nobg-1">CBX primary</label> </div> </div> <div class="funkyradio-secondary funkyradio-NOBG"> <div class="funkyradio"> <input type="checkbox" name="checkbox2" id="checkbox-nobg-2" value="1"> <label for="checkbox-nobg-2">CBX secondary</label> </div> </div> <div class="funkyradio-success funkyradio-NOBG"> <div class="funkyradio"> <input type="checkbox" name="checkbox2" id="checkbox-nobg-3" value="1"> <label for="checkbox-nobg-3">CBX success</label> </div> </div> <div class="funkyradio-danger funkyradio-NOBG"> <div class="funkyradio"> <input type="checkbox" name="checkbox2" id="checkbox-nobg-4" value="1"> <label for="checkbox-nobg-4">CBX danger</label> </div> </div> <div class="funkyradio-warning funkyradio-NOBG"> <div class="funkyradio"> <input type="checkbox" name="checkbox2" id="checkbox-nobg-5" value="1"> <label for="checkbox-nobg-5">CBX warning</label> </div> </div> <div class="funkyradio-info funkyradio-NOBG"> <div class="funkyradio"> <input type="checkbox" name="checkbox2" id="checkbox-nobg-6" value="1"> <label for="checkbox-nobg-6">CBX info</label> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <h4>All colors preview (slight background)</h4> </div> <div class="col-2"> <div class="funkyradio-"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-0" value="1" checked="checked"> <label for="cbx-prev-md-nobg-0">Checked </label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-default"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-1" value="1" checked="checked"> <label for="cbx-prev-md-nobg-1">Checked default</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-primary"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-2" value="1" checked="checked"> <label for="cbx-prev-md-nobg-2">Checked primary</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-secondary"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-3" value="1" checked="checked"> <label for="cbx-prev-md-nobg-3">Checked secondary</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-success"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-4" value="1" checked="checked"> <label for="cbx-prev-md-nobg-4">Checked success</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-danger"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-5" value="1" checked="checked"> <label for="cbx-prev-md-nobg-5">Checked danger</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-warning"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-6" value="1" checked="checked"> <label for="cbx-prev-md-nobg-6">Checked warning</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-info"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-7" value="1" checked="checked"> <label for="cbx-prev-md-nobg-7">Checked info</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-dark"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-8" value="1" checked="checked"> <label for="cbx-prev-md-nobg-8">Checked dark</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-alt"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-9" value="1" checked="checked"> <label for="cbx-prev-md-nobg-9">Checked alt</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-elegant"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-10" value="1" checked="checked"> <label for="cbx-prev-md-nobg-10">Checked elegant</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-unique"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-11" value="1" checked="checked"> <label for="cbx-prev-md-nobg-11">Checked unique</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-pink"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-12" value="1" checked="checked"> <label for="cbx-prev-md-nobg-12">Checked pink</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-purple"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-13" value="1" checked="checked"> <label for="cbx-prev-md-nobg-13">Checked purple</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-deep-blue"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-14" value="1" checked="checked"> <label for="cbx-prev-md-nobg-14">Checked deep-blue</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-indigo"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-15" value="1" checked="checked"> <label for="cbx-prev-md-nobg-15">Checked indigo</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-light-blue"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-16" value="1" checked="checked"> <label for="cbx-prev-md-nobg-16">Checked light-blue</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-cyan"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-17" value="1" checked="checked"> <label for="cbx-prev-md-nobg-17">Checked cyan</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-dark-green"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-18" value="1" checked="checked"> <label for="cbx-prev-md-nobg-18">Checked dark-green</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-light-green"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-19" value="1" checked="checked"> <label for="cbx-prev-md-nobg-19">Checked light-green</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-yellow"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-20" value="1" checked="checked"> <label for="cbx-prev-md-nobg-20">Checked yellow</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-amber"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-21" value="1" checked="checked"> <label for="cbx-prev-md-nobg-21">Checked amber</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-deep-orange"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-22" value="1" checked="checked"> <label for="cbx-prev-md-nobg-22">Checked deep-orange</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-brown"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-23" value="1" checked="checked"> <label for="cbx-prev-md-nobg-23">Checked brown</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-blue-grey"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-24" value="1" checked="checked"> <label for="cbx-prev-md-nobg-24">Checked blue-grey</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-mdb"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md-nobg" id="cbx-prev-md-nobg-25" value="1" checked="checked"> <label for="cbx-prev-md-nobg-25">Checked mdb</label> </div> </div> </div> <div class="col-12 pt-3"> <h4>All colors preview (transparent background)</h4> </div> <div class="col-2"> <div class="funkyradio- funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-0" value="1" checked="checked"> <label for="cbx-prev-md-0">Checked </label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-default funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-1" value="1" checked="checked"> <label for="cbx-prev-md-1">Checked default</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-primary funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-2" value="1" checked="checked"> <label for="cbx-prev-md-2">Checked primary</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-secondary funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-3" value="1" checked="checked"> <label for="cbx-prev-md-3">Checked secondary</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-success funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-4" value="1" checked="checked"> <label for="cbx-prev-md-4">Checked success</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-danger funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-5" value="1" checked="checked"> <label for="cbx-prev-md-5">Checked danger</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-warning funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-6" value="1" checked="checked"> <label for="cbx-prev-md-6">Checked warning</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-info funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-7" value="1" checked="checked"> <label for="cbx-prev-md-7">Checked info</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-dark funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-8" value="1" checked="checked"> <label for="cbx-prev-md-8">Checked dark</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-alt funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-9" value="1" checked="checked"> <label for="cbx-prev-md-9">Checked alt</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-elegant funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-10" value="1" checked="checked"> <label for="cbx-prev-md-10">Checked elegant</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-unique funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-11" value="1" checked="checked"> <label for="cbx-prev-md-11">Checked unique</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-pink funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-12" value="1" checked="checked"> <label for="cbx-prev-md-12">Checked pink</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-purple funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-13" value="1" checked="checked"> <label for="cbx-prev-md-13">Checked purple</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-deep-blue funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-14" value="1" checked="checked"> <label for="cbx-prev-md-14">Checked deep-blue</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-indigo funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-15" value="1" checked="checked"> <label for="cbx-prev-md-15">Checked indigo</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-light-blue funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-16" value="1" checked="checked"> <label for="cbx-prev-md-16">Checked light-blue</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-cyan funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-17" value="1" checked="checked"> <label for="cbx-prev-md-17">Checked cyan</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-dark-green funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-18" value="1" checked="checked"> <label for="cbx-prev-md-18">Checked dark-green</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-light-green funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-19" value="1" checked="checked"> <label for="cbx-prev-md-19">Checked light-green</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-yellow funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-20" value="1" checked="checked"> <label for="cbx-prev-md-20">Checked yellow</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-amber funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-21" value="1" checked="checked"> <label for="cbx-prev-md-21">Checked amber</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-deep-orange funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-22" value="1" checked="checked"> <label for="cbx-prev-md-22">Checked deep-orange</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-brown funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-23" value="1" checked="checked"> <label for="cbx-prev-md-23">Checked brown</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-blue-grey funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-24" value="1" checked="checked"> <label for="cbx-prev-md-24">Checked blue-grey</label> </div> </div> </div> <div class="col-2"> <div class="funkyradio-mdb funkyradio-NOBG"> <div class="funkyradio-md"> <input type="checkbox" name="cbx-prev-md" id="cbx-prev-md-25" value="1" checked="checked"> <label for="cbx-prev-md-25">Checked mdb</label> </div> </div> </div> </div> <div class="row pt-3 mb-2"> <div class="col-12 small"> Based on: "custom radio button" Snippet by <a href="https://bootsnipp.com/samsharma" target="_blank">samsharma</a> </div> <div class="col-12 small"> Additional colors: <a href="https://mdbootstrap.com/docs/jquery/components/buttons/" target="_blank">Material Design for Bootstrap</a> </div> </div> </div>

/* FUNKY SM */ .funkyradio-sm label:not(.simple) { /*min-width: 400px;*/ width: 100%; border-radius: 3px; border: 1px solid #D1D3D4; font-weight: normal; } .funkyradio-sm input[type="radio"]:empty, .funkyradio-sm input[type="checkbox"]:empty { display: none; } .funkyradio-sm input[type="radio"]:empty ~ label, .funkyradio-sm input[type="checkbox"]:empty ~ label { position: relative; line-height: 1.5em; text-indent: 1.75em; margin-top: 0.1em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 0.8rem; } .funkyradio-sm input[type="radio"]:empty ~ label:before, .funkyradio-sm input[type="checkbox"]:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content:' '; width: 2em; font-size: 0.6rem; background: #D1D3D4; border-radius: 3px 0 0 3px; } .funkyradio-sm input[type="radio"]:hover:not(:checked) ~ label:before { content:'\2717'; text-indent: .6em; color: #C2C2C2; } .funkyradio-sm input[type="checkbox"]:hover:not(:checked) ~ label:before { content:'\2714'; text-indent: .6em; color: #C2C2C2; } .funkyradio-sm input[type="radio"]:hover:not(:checked) ~ label, .funkyradio-sm input[type="checkbox"]:hover:not(:checked) ~ label { color: #888; } .funkyradio-sm input[type="radio"]:checked ~ label:before { content:'\2717'; text-indent: .6em; color: #333; background-color: #ccc; } .funkyradio-sm input[type="checkbox"]:checked ~ label:before { content:'\2714'; text-indent: .6em; color: #333; background-color: #ccc; } .funkyradio-sm input[type="radio"]:checked ~ label, .funkyradio-sm input[type="checkbox"]:checked ~ label { color: #777; } .funkyradio-sm input[type="radio"]:focus ~ label:before, .funkyradio-sm input[type="checkbox"]:focus ~ label:before { box-shadow: 0 0 0 3px #999; } /* FUNKY MD*/ .funkyradio-md label:not(.simple) { /*min-width: 400px;*/ width: 100%; border-radius: 3px; border: 1px solid #D1D3D4; font-weight: normal; } .funkyradio-md input[type="radio"]:empty, .funkyradio-md input[type="checkbox"]:empty { display: none; } .funkyradio-md input[type="radio"]:empty ~ label, .funkyradio-md input[type="checkbox"]:empty ~ label { position: relative; line-height: 2.15em; text-indent: 2.75em; margin-top: 0.2em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 0.8rem; } .funkyradio-md input[type="radio"]:empty ~ label:before, .funkyradio-md input[type="checkbox"]:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content:' '; width: 2.5em; font-size: 0.75rem; background: #D1D3D4; border-radius: 3px 0 0 3px; } .funkyradio-md input[type="radio"]:hover:not(:checked) ~ label:before { content:'\2717'; text-indent: .8em; color: #C2C2C2; } .funkyradio-md input[type="checkbox"]:hover:not(:checked) ~ label:before { content:'\2714'; text-indent: .8em; color: #C2C2C2; } .funkyradio-md input[type="radio"]:hover:not(:checked) ~ label, .funkyradio-md input[type="checkbox"]:hover:not(:checked) ~ label { color: #888; } .funkyradio-md input[type="radio"]:checked ~ label:before { content:'\2717'; text-indent: .8em; color: #333; background-color: #ccc; } .funkyradio-md input[type="checkbox"]:checked ~ label:before { content:'\2714'; text-indent: .8em; color: #333; background-color: #ccc; } .funkyradio-md input[type="radio"]:checked ~ label, .funkyradio-md input[type="checkbox"]:checked ~ label { color: #777; } .funkyradio-md input[type="radio"]:focus ~ label:before, .funkyradio-md input[type="checkbox"]:focus ~ label:before { box-shadow: 0 0 0 3px #999; } /* FUNKY */ .funkyradio label:not(.simple) { /*min-width: 400px;*/ width: 100%; border-radius: 3px; border: 1px solid #D1D3D4; font-weight: normal; } .funkyradio input[type="radio"]:empty, .funkyradio input[type="checkbox"]:empty { display: none; } .funkyradio input[type="radio"]:empty ~ label, .funkyradio input[type="checkbox"]:empty ~ label { position: relative; line-height: 2.5em; text-indent: 3.25em; margin-top: 0.2em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .funkyradio input[type="radio"]:empty ~ label:before, .funkyradio input[type="checkbox"]:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content:''; width: 2.5em; background: #D1D3D4; border-radius: 3px 0 0 3px; } .funkyradio input[type="radio"]:hover:not(:checked) ~ label:before { content:'\2717'; text-indent: .9em; color: #C2C2C2; } .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before { content:'\2714'; text-indent: .9em; color: #C2C2C2; } .funkyradio input[type="radio"]:hover:not(:checked) ~ label, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label { color: #888; } .funkyradio input[type="radio"]:checked ~ label:before { content:'\2717'; text-indent: .9em; color: #333; background-color: #ccc; } .funkyradio input[type="checkbox"]:checked ~ label:before { content:'\2714'; text-indent: .9em; color: #333; background-color: #ccc; } .funkyradio input[type="radio"]:checked ~ label, .funkyradio input[type="checkbox"]:checked ~ label { color: #777; } .funkyradio input[type="radio"]:focus ~ label:before, .funkyradio input[type="checkbox"]:focus ~ label:before { box-shadow: 0 0 0 3px #999; } /* DEFAULT and not set */ .funkyradio input[type="radio"]:checked ~ label:before, .funkyradio input[type="checkbox"]:checked ~ label:before { color: #333; background-color: #ccc; } .funkyradio input[type="radio"]:checked ~ label, .funkyradio input[type="checkbox"]:checked ~ label { background-color: #fafafa; } .funkyradio-default input[type="radio"]:checked ~ label:before, .funkyradio-default input[type="checkbox"]:checked ~ label:before { color: #333; background-color: #ccc; } .funkyradio-default input[type="radio"]:checked ~ label, .funkyradio-default input[type="checkbox"]:checked ~ label { background-color: #fafafa; } /* PRIMARY */ .funkyradio-primary input[type="radio"]:checked ~ label:before, .funkyradio-primary input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #4285f4; } .funkyradio-primary input[type="radio"]:checked ~ label, .funkyradio-primary input[type="checkbox"]:checked ~ label { background-color: #e3edfd; } /* SECONDARY */ .funkyradio-secondary input[type="radio"]:checked ~ label:before, .funkyradio-secondary input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #aa66cc; } .funkyradio-secondary input[type="radio"]:checked ~ label, .funkyradio-secondary input[type="checkbox"]:checked ~ label { background-color: #f2e8f7; } /* SUCCESS */ .funkyradio-success input[type="radio"]:checked ~ label:before, .funkyradio-success input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #00c851; } .funkyradio-success input[type="radio"]:checked ~ label, .funkyradio-success input[type="checkbox"]:checked ~ label { background-color: #d9f7e5; } /* DANGER */ .funkyradio-danger input[type="radio"]:checked ~ label:before, .funkyradio-danger input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #ff3547; } .funkyradio-danger input[type="radio"]:checked ~ label, .funkyradio-danger input[type="checkbox"]:checked ~ label { background-color: #ffe1e4; } /* WARNING */ .funkyradio-warning input[type="radio"]:checked ~ label:before, .funkyradio-warning input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #ffbb33; } .funkyradio-warning input[type="radio"]:checked ~ label, .funkyradio-warning input[type="checkbox"]:checked ~ label { background-color: #fff5e1; } /* INFO */ .funkyradio-info input[type="radio"]:checked ~ label:before, .funkyradio-info input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #33b5e5; } .funkyradio-info input[type="radio"]:checked ~ label, .funkyradio-info input[type="checkbox"]:checked ~ label { background-color: #e1f4fb; } /* DARK */ .funkyradio-dark input[type="radio"]:checked ~ label:before, .funkyradio-dark input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #212121; } .funkyradio-dark input[type="radio"]:checked ~ label, .funkyradio-dark input[type="checkbox"]:checked ~ label { background-color: #dedede; } /* ALT */ .funkyradio-alt input[type="radio"]:checked ~ label:before, .funkyradio-alt input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #2bbbad; } .funkyradio-alt input[type="radio"]:checked ~ label, .funkyradio-alt input[type="checkbox"]:checked ~ label { background-color: #dff5f3; } /* ELEGANT */ .funkyradio-elegant input[type="radio"]:checked ~ label:before, .funkyradio-elegant input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #2e2e2e; } .funkyradio-elegant input[type="radio"]:checked ~ label, .funkyradio-elegant input[type="checkbox"]:checked ~ label { background-color: #e0e0e0; } /* UNIQUE */ .funkyradio-unique input[type="radio"]:checked ~ label:before, .funkyradio-unique input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #880e4f; } .funkyradio-unique input[type="radio"]:checked ~ label, .funkyradio-unique input[type="checkbox"]:checked ~ label { background-color: #eddbe5; } /* PINK */ .funkyradio-pink input[type="radio"]:checked ~ label:before, .funkyradio-pink input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #ec407a; } .funkyradio-pink input[type="radio"]:checked ~ label, .funkyradio-pink input[type="checkbox"]:checked ~ label { background-color: #fce3eb; } /* PURPLE */ .funkyradio-purple input[type="radio"]:checked ~ label:before, .funkyradio-purple input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #8e24aa; } .funkyradio-purple input[type="radio"]:checked ~ label, .funkyradio-purple input[type="checkbox"]:checked ~ label { background-color: #eedef2; } /* DEEP BLUE */ .funkyradio-deep-blue input[type="radio"]:checked ~ label:before, .funkyradio-deep-blue input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #512da8; } .funkyradio-deep-blue input[type="radio"]:checked ~ label, .funkyradio-deep-blue input[type="checkbox"]:checked ~ label { background-color: #e5e0f2; } /* INDIGO */ .funkyradio-indigo input[type="radio"]:checked ~ label:before, .funkyradio-indigo input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #3f51b5; } .funkyradio-indigo input[type="radio"]:checked ~ label, .funkyradio-indigo input[type="checkbox"]:checked ~ label { background-color: #e2e5f4; } /* LIGHT BLUE */ .funkyradio-light-blue input[type="radio"]:checked ~ label:before, .funkyradio-light-blue input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #3f51b5; } .funkyradio-light-blue input[type="radio"]:checked ~ label, .funkyradio-light-blue input[type="checkbox"]:checked ~ label { background-color: #e2e5f4; } /* CYAN */ .funkyradio-cyan input[type="radio"]:checked ~ label:before, .funkyradio-cyan input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #00bcd4; } .funkyradio-cyan input[type="radio"]:checked ~ label, .funkyradio-unique input[type="checkbox"]:checked ~ label { background-color: #d9f5f9cyan } /* DARK GREEN */ .funkyradio-dark-green input[type="radio"]:checked ~ label:before, .funkyradio-dark-green input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #388e3c; } .funkyradio-dark-green input[type="radio"]:checked ~ label, .funkyradio-dark-green input[type="checkbox"]:checked ~ label { background-color: #e1eee2; } /* LIGHT GREEN */ .funkyradio-light-green input[type="radio"]:checked ~ label:before, .funkyradio-light-green input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #8bc34a; } .funkyradio-light-green input[type="radio"]:checked ~ label, .funkyradio-light-green input[type="checkbox"]:checked ~ label { background-color: #eef6e4; } /* YELLOW */ .funkyradio-yellow input[type="radio"]:checked ~ label:before, .funkyradio-yellow input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #fbc02d; } .funkyradio-yellow input[type="radio"]:checked ~ label, .funkyradio-yellow input[type="checkbox"]:checked ~ label { background-color: #fef6e0; } /* AMBER */ .funkyradio-amber input[type="radio"]:checked ~ label:before, .funkyradio-amber input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #ffa000; } .funkyradio-amber input[type="radio"]:checked ~ label, .funkyradio-amber input[type="checkbox"]:checked ~ label { background-color: #fff1d9; } /* DEEP ORANGE */ .funkyradio-deep-orange input[type="radio"]:checked ~ label:before, .funkyradio-deep-orange input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #ff7043; } .funkyradio-deep-orange input[type="radio"]:checked ~ label, .funkyradio-deep-orange input[type="checkbox"]:checked ~ label { background-color: #ffeae3; } /* BROWN */ .funkyradio-brown input[type="radio"]:checked ~ label:before, .funkyradio-brown input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #795548; } .funkyradio-brown input[type="radio"]:checked ~ label, .funkyradio-brown input[type="checkbox"]:checked ~ label { background-color: #ebe6e4; } /* BLUE-GREY */ .funkyradio-blue-grey input[type="radio"]:checked ~ label:before, .funkyradio-blue-grey input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #78909c; } .funkyradio-blue-grey input[type="radio"]:checked ~ label, .funkyradio-blue-grey input[type="checkbox"]:checked ~ label { background-color: #ebeef0; } /* MDB */ .funkyradio-mdb input[type="radio"]:checked ~ label:before, .funkyradio-mdb input[type="checkbox"]:checked ~ label:before { color: #ffffff; background-color: #59698d; } .funkyradio-mdb input[type="radio"]:checked ~ label, .funkyradio-mdb input[type="checkbox"]:checked ~ label { background-color: #e6e9ee; } .funkyradio-NOBG input[type="radio"]:checked ~ label, .funkyradio-NOBG input[type="checkbox"]:checked ~ label { background-color: transparent!important; }