Checkbox styling

Hi guys,

I would like to make buttons from the checkboxes in the search in the frontend.
Like this site:
https://warmonderhof.nl/echt-warmonderhof/oud-studenten/warmonderhoffers-wereldwijd

Now the easy profile is a little bit different in code and a tiny customization would make it allot easyer.



	<label>

	<input type="checkbox">

        Labelname

	</label>

Easyer to style would be to span the Label.



	<label>

	<input type="checkbox">

        <span>Labelname<span>

	</label>

I than can use css like this:



label span {

color:#fff;

font-size:14px;

    display:block;

    border:1px solid #F26F37;

    padding:5px;

    cursorointer;

    font-weight:normal;

background: #C6E0ED;

 background-image: linear-gradient(to bottom, #FF0000 0px, #f94848  100%);

}



input[type="checkbox"]:checked + span {

    background-color:#C6E0ED;

 background-image: linear-gradient(to bottom, #C6E0ED 0px, #C6E0ED  100%);

}

Now i have no idea how to grab it and style this label, and change label if checked.
This would be a really easy update but a core change if i do it if i am not mistaken.

Is it something for an update or can you tell me what file i need to change?

Thank you so much!

jQuery(document).ready(function(){ var check_button_class = 'btn btn-default btn-xs'; // you can customize here var check_button_class_active = 'btn-success'; // you can customize here jQuery('label.checkbox').each(function(){ var self = jQuery(this); var active = self.find('input').prop('checked'); self.hide(); if(active) self.after('<span class="'+check_button_class+' '+check_button_class_active+'" data-checkbox="'+self.find('input').attr('id')+'">'+self.text()+'</span>'); else self.after('<span class="'+check_button_class+'" data-checkbox="'+self.find('input').attr('id')+'">'+self.text()+'</span>'); }); jQuery('.btn[data-checkbox]').each(function(){ var self = jQuery(this); self.click(function(){ self.toggleClass(check_button_class_active); var checkbox = jQuery('#'+self.attr('data-checkbox')) checkbox.attr("checked", !checkbox.attr("checked")); checkbox.change(); }); }); });

Resolved Checkbox styling