Reply To: Change Layout of tick box to button style

Hi,

I hope you are doing well. I think there is a little bit of confusion. Actually, I hide all the checkboxes as you can see in the above attachment, and apply a little bit of CSS in the search settings -> category level 1 -> option label. Just to make this more clear, this is the CSS I have used.

div.asp_w.asp_sb_2_1.searchsettings .asp_option_inner,
div.asp_w.asp_sb_2_1.searchsettings fieldset legend{
	display: none;
}

.asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-0 .asp_option_label, .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-0 .asp_option_label{
	padding: 10px 20px;
	text-align: center;
	color: #ffffff;
	font-family: "SofiaPro", Sans-serif;
	font-weight: 400;
	font-size: 14px;
        line-height: 18px;
	border-radius: 50px;
	background-color: #1a1962;
	box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%);
}
.asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-1 .asp_option_label, .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-1 .asp_option_label{
	padding: 10px 20px;
	text-align: center;
	color: #858383;
	font-family: "SofiaPro", Sans-serif;
	font-weight: 400;
	font-size: 14px;
        line-height: 18px;
	border-radius: 50px;
	background-color: #e6e6e6;
	box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%);	
}
.asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-1 .asp_option_label:hover, .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-1 .asp_option_label:hover{
	padding: 10px 20px;
	text-align: center;
	color: #ffffff;
	font-family: "SofiaPro", Sans-serif;
	font-weight: 400;
	font-size: 14px;
        line-height: 18px;
	border-radius: 50px;
	background-color: #1161b7;
	box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%);	
}

Everything works fine, all I need is when the child category gets checked it changes the child category option label background as you can see in the attachment.

Thank you

Regards,
Shayan Ahmed