Skip Navigation

[Resolved] Trouble customizing checkboxes

This support ticket is created 5 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 3 replies, has 2 voices.

Last updated by maxfieldB 5 years ago.

Assisted by: Minesh.

Author
Posts
#1381857

Tell us what you are trying to do?
Hello, we are trying to customize the appearance of the checkboxes - you can see them on the homepage of battstaging2.com. We are actually really struggling with this - and we can't use the native checkboxes since the appearance changes from browser to browser, and visual design is very important to us.

At first, we tried to use the jQuery checkboxradio() - and this did not work for some reason. Now, we are using an alternative, but popular, custom CSS configuration that hides and then recreates part of the checkbox, and it does work. But only if the <input> is not nested *inside* the <label> - we are able to achieve this by giving the outputs shorcode of "legacy" - *however* it does not fully work on the category outputs. You can see that the category outputs are not fully working on our homepage.

I am really hoping you can help, because the appearance of the checkbox is very, very important to us - it is the most major visual element of our site, so we really need to have control over this, thank you!

Is there any documentation that you are following?
No

Is there a similar example that we can see?
No

What is the link to your site?
hidden link

#1381867

One other note - I recently chatted with someone from Toolset about this, and they told me that the we were doing it was actually too custom for Toolset.

If you have a *different* suggestion than hiding the checkbox, that would be great! Really, we are just trying to have control over the appearance of the checkbox. But it doesn't matter how this is achieved.

Thanks!
Max

#1382145

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

I checked the HTML source hidden link and check the top checkboxes field and I see the label is added just after the checkboxes input. As you can see with the following link;
=> hidden link

So, if you just dont want checkboxes, I think another way is to convert checkboxes to buttons using some CSS code. Please check the following link:
=> https://stackoverflow.com/questions/7642277/css-styled-a-checkbox-to-look-like-a-button-is-there-a-hover
=> hidden link [ for checkboxes]
=> hidden link [ for radio button]

#1383797

My issue is resolved now. Thank you!