Classes for radio buttons and checkboxes

Gravity Support Forums » Plugin Support » Gravity Forms

Pandonym
Member

Hi,

I use the InFocus theme from mysitemyway-com. They implemented a contact form with nice looking radio buttons and checkboxes and I want to use them for the gravity forms.

It is confusing for me what classes I should use to style these boxes.

When I add ".gform_wrapper .gfield_radio li" to the style section in my theme where their boxes are styled, it breaks my layout like this:
http://imageshack.us/photo/my-images/706/mycheckboxes.jpg/

Their checkboxes look like these:
http://imageshack.us/photo/my-images/577/theircheckboxes.jpg/

So I copied the radio and checkbox classes and renamed them to ".gravity_radio" and ".gravity_checkbox". Then I defiened a custom css class in the configuration of my form and now it looks like this:
http://www.pandonym.com/testseite/

What should I do?

Posted 12 years ago on Saturday January 7, 2012 | Permalink
Rob Harrell
Member

Where can I go to see these radio fields and checkboxes, do you have URL to one of their pages so I can take a look.

Posted 12 years ago on Saturday January 7, 2012 | Permalink
Pandonym
Member

Hi Rob,

sure, here is it:
http://themes.mysitemyway.com/infocus/shortcodes/contact-form/

Posted 12 years ago on Saturday January 7, 2012 | Permalink
Rob Harrell
Member
Alright, so it's a bit more than just placing some CSS in. This is also using javascript to help out. It's based off this:

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

I found this by viewing the source of the URL you sent. I was able to get half of this styled just regularly, but like I said, it's dependent on using the scripting above. Are you comfortable trying that out?

For the styles I did this:
```
[css]
.gravity_radio li {
background: url(images/shortcodes/radio.png) no-repeat;
}
.gravity_checkbox, .gravity_radio li {
width: 20px;
height: 25px;
padding: 0 5px 0 0 !important;
background: url(images/shortcodes/checkbox.png) no-repeat;
display: inline-block;
vertical-align: middle;
line-height: 25px !important;
}
.gravity_radio input[type="radio"], .gravity_checkbox input[type="checkbox"] {
display: none;
}
```
If you place that in you'll see the new background piece, but that's it. The idea is the JavaScript looks for every form element with class="styled" on it; hides the real form element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the visual stages form inputs go through when they are clicked.

So you could end up needing to do some tweaking, but try it out and see if you can get it to work.
Posted 12 years ago on Saturday January 7, 2012 | Permalink
Jon_burke
Member

Hi Rob, I bought Gravity forms yesterday and am also using the same theme as Pandonym. i also have the same issue but can't buy a developer's license until I get this sorted. Specifically, the isues I have are that the radio buttons, drop box buttons and back and next buttons (only multi page) don't pick upn the styling of the mysitemyway theme. While gravity forms are great and work well, they are ion consistent with the rest of my site. I would like to try the script you provided abovbe but dont know where I would put it - sorry mate I'm a bit of an amatuer.

Thanks alot. Jon.

Posted 12 years ago on Sunday February 5, 2012 | Permalink
Rob Harrell
Member

Jon, can you hook me up with a link to your form so I can take a look?

Posted 12 years ago on Sunday February 5, 2012 | Permalink