[Resolved] styling checkbox labels

[Author]

Posts

[jonathanB-19]

I am trying to style the labels on my checkboxes with css. I found a variety of support tickets where people were able to do this with input[type="checkbox"] + label but this isn't working for me. I believe it's because the input is nested inside the label so CSS won't select the parent element.

Please see attached screenshot as the site is not live. I want to style the blue boxes when the label is checked.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - do you mean you want to highlight the whole box when checkbox is checked?

Can I see where those checkboxes added - Can you please share the link of that page?

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[jonathanB-19]

I took the construction page down temporarily so you can see it here: hidden link

I want to do something similar to what they did here: https://toolset.com/forums/topic/style-checkboxes/

I can't get the :checked selector to apply to the label, and I can't modify the input to have a :before or :after. So I can change the size of the checkbox, or hide it, but I can't really style anything else. The goal is to have it look like the attached screenshot. Blue when checked and blue outline when not checked.

[Minesh]

Well - the customize the checkboxes as per your requirement require a good knowledge of CSS and javascript.

This needs custom programming which is beyond the scope of our support policy. If you need custom programming for your project, please feel free to contact our certified partners:
=> https://toolset.com/contractors/

However - I can show you an alternative way if you would like to try it which I suggested to another user.

you should try to add your filters normally to your "Search and pagination" section and save the view and load the view on the frontend.
- Then, you should copy the rendered HTML for your checkboxes filter field from the view source and copy that HTML to your "Search and Pagination" section and remove the filter field you added using the shortcodes [wpv-control-postmeta].

Now, you have HTML for your filter field within the "Search and Pagination" section and you can customize its looks as per your need.

See the related ticket:
=> https://toolset.com/forums/topic/customizing-checkboxes-on-wpv-control-postmeta/#post-1207016

[jonathanB-19]

I've determined that there isn't a way to solve the problem with CSS because of the way that the inputs are nested inside the labels, but I was able to solve it with some pretty simple jQuery. Thanks.