Changing look of Radio Buttons « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

edde
Member
Hi all,

I'm trying to accomplish the following:
- two bullet lists next to each other (using gf_left_half for that)
- remove the bullets
- create a border around the label

So far, I've tried http://www.gravityhelp.com/forums/topic/can-gf-use-images-to-make-form-selections (and some changes to that) but it doesn't seem to work. The radio button is persistent
to say the least :-/
I'm probably overlooking something, or just being stupid...

css, so far:
```
.gform_wrapper ul.gravity_radio li input[type="radio"] {
  display: none !important;
}
.gform_wrapper ul.gfield_radio li input[type="radio"] + label {
  padding: 5px;
  border: 1px solid #000;
  background: #ddd;
}
.gform_wrapper ul.gfield_radio li input[type="radio"]:checked + label {
  border: 1px solid #000;
  background: #eee;
  font-weight: normal !important;
  color: #c00;
}
```
The form is located at: http://dev.lauretum.net/wordpress/test-radio-buttons/

Any help would be appreciated.

Thanks!
Edde
Posted 11 years ago on Wednesday January 30, 2013 | Permalink
Chris Hajer
Key Master
I only saw this one line as being incorrect (fixed version below):
```
[css]
.gform_wrapper ul.gfield_radio li input[type="radio"]
```
You had ul.gravity_radio instead of ul.gfield_radio. I changed that and displayed your form without radio buttons. Does that solve any of your trouble?

Screenshot: http://minus.com/lbiHFpUAn8ZmZz
Posted 11 years ago on Thursday January 31, 2013 | Permalink
edde
Member

That's it! Thanks a 10^6!

Edde

Posted 11 years ago on Thursday January 31, 2013 | Permalink
edde
Member

One last question: how do I limit this to one form only - leaving the radio buttons of other forms as they were?

Posted 11 years ago on Thursday January 31, 2013 | Permalink

Change all your .gform_wrapper to #gform_wrapper_ID, where ID is your form ID. You can check the source of the page for the ID; I think it was 6 for your form. So this would apply your CSS to form 6 only: #gform_wrapper_6

[css]
#gform_wrapper_6 ul.gfield_radio li input[type="radio"] {
	display: none !important;
	margin: 0;
}
#gform_wrapper_6 ul.gfield_radio li input[type="radio"] + label {
	padding: 5px;
	border: 1px solid #f2bb92;
	background: #f9efe8;
	margin: 0 6px 0 0;
	border-radius: 4px;
}
#gform_wrapper_6 ul.gfield_radio li input[type="radio"]:checked + label {
	border: 1px solid #f2bb92;
	background: #f2bb92;
	font-weight: normal !important;
	color: #fff;
}
#gform_wrapper_6 .gfield_label {
	color: #e36f1e;
}

Posted 11 years ago on Thursday January 31, 2013 | Permalink

edde
Member

Thanks! (for service way beyond just GravityForms)

Posted 11 years ago on Thursday January 31, 2013 | Permalink
Chris Hajer
Key Master

You're welcome. Glad you worked it out.

Posted 11 years ago on Friday February 1, 2013 | Permalink

This topic has been resolved and has been closed to new replies.