Change Layout of tick box to button style

[theonlyit59Participant]

Hi,

I have changed the layout of filter check boxes to button style, I want to change background color on active check box, please let me know how to achieve this. Please see attachment for reference.

Thank you

Regards,
Shayan Ahmed

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi Shayan,

Well you can change the actual tick background colors here: https://i.imgur.com/P4gWGiH.png

However that may no longer be true to your case, if you already customized that. While we can not guarantee anything for customizations, I can check that out for you, maybe I can recommend a custom CSS or something – if that option does not work.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[theonlyit59Participant]

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

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

I’m afraid you can’t do that via custom CSS. The label and the checkbox are within different parent nodes, and there is no way to target parent nodes via CSS. The only way to do that is using javascript code. Using probably a click event handler on the labels to check the checkbox statuses and adding classes is the easiest way to go.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts