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