[Resolved] Checkbox css :checked+ label not working

[Author]

Posts

[SteffenM1628]

Tell us what you are trying to do?

Hey there. I want to style the checkbox labels when the checkbox is checked.
So i tried this in css

input[type= "checkbox"]:checked+ label {
 background-color: #569cc3!important;
}

But this won‘t work.
Could you help style the labe of a checkbox when the box is checked?

Cheers

[Jamal]

Hello and thank you for contacting the Toolset support.

I'll need to see your page to better help with this, can you share a URL where I can see this? Please tell me which checkbox to check.
I need to know if it is a checkbox on a form or on a search filter. Please tell me which one?

But in the meantime, I suggest adding a special class to the checkbox and scope the styles by this class. Let's say that the class is "my-custom-checkbox", the code then will be:

.my-custom-checkbox input[type= "checkbox"]:checked+label {
  background-color: #569cc3!important;
}

Looking forward to your reply.

[SteffenM1628]

Hey Jamal,

thanks for your fast reply.

Your solution didn´t worked out. It is a checkbox field in a form to select taxonomies.

Is there a way to share with you the link secretly?

Cheers

[Jamal]

I activated the private reply, your next reply will be private.

If you don't mind, please share credentials to your site so I can handle this quickly.
*** Please make a FULL BACKUP of your database and website before sharing credentials.***

[Jamal]

Thank you for the access information. I was able to make what you want with a custom Javascript code instead of CSS code.
CSS solution is too hard because the checkbox is rendered inside the label instead of being a sibling of it. Check this screenshot hidden link

So I added the following code to the form and it seems to work, you can check your form page on the frontend:

jQuery(function($){
    $(".wpt-form-set-checkboxes-artikel_taxo input[type='checkbox']").change(function(event){
      var checkbox = $(event.target);
      var status = checkbox.attr('checked');
      if (status) checkbox.parent().css('background-color', '#569cc3');
      else checkbox.parent().css('background-color', '');
    })
})

I hope this helps. Let me know if you have any questions.

[SteffenM1628]

hey jamal,

thanks for your work. It works. But this is not really satisfying using javascript instead of a simple line of css code.
Toolset needs to improve with this stuff a lot.
Why is that so hard with Toolset working with css.
At this time i need to display those checkboxes inline.
None of the classes or id´s do work.

really frustating.
could you help me please?

cheers

[SteffenM1628]

My issue is resolved now. Thank you!