PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Pass Class Name to Checkbox

  1. I am trying to use this method for converting my checkboxes to images.

    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

    The complication arises from the fact that I need to specify the class "styled" for each individual checkbox in gravity forms.

    Any ideas on how to achieve this?

    many thanks

    Posted 7 years ago on Monday March 11, 2013 | Permalink
  2. On the advanced tab for your checkboxes, can you add the Custom CSS Class or "styled"?

    Posted 7 years ago on Wednesday March 13, 2013 | Permalink
  3. If I do that the class "styled" is not applied on each individual checkbox.. It's applied on the | ul | element..

    Posted 7 years ago on Wednesday March 13, 2013 | Permalink
  4. Got it. In that case, I think you will need to use jQuery to add the class to each < li > (or should it be applied to the input element, according to the documentation here?)

    Posted 7 years ago on Thursday March 14, 2013 | Permalink
  5. yes it should be applied to each element like this:

    <input type="checkbox" name="a" class="styled" />

    this is getting too confusing! i wish there was an easier alternative but couldnt find any working solutions for gravity forms.. maybe you guys can make our life easier in the next update... "web 2.0 style" is very important these days..

    Posted 7 years ago on Friday March 15, 2013 | Permalink
  6. You best solution at this point is to add that class to all checkbox inputs using jQuery.

    There are other solutions out there as well, including Uniform.js:
    http://uniformjs.com/

    I implemented that on some elements on one form recently:
    http://gravity.chrishajer.com/job-application/

    Maybe that script would be easier to add, if you're just looking to modernize the look of the form elements?

    Posted 7 years ago on Sunday March 17, 2013 | Permalink
  7. I will give unifromjs a try but in your example link the checkboxes are not working...

    Posted 7 years ago on Monday March 18, 2013 | Permalink
  8. It was a quick example of incorporating a styling script. I only applied it to some form elements, and I did notice that the checkboxes or radio buttons (I forget which) did not work in Chrome. I did not debug that portion of it. It was just an example of *how* to incorporate it. It was easier than adding a class to every form input and I thought maybe it would be an alternative for you.

    Posted 7 years ago on Tuesday March 19, 2013 | Permalink