Kevin Flahaut's tips for css targeting specific elements not working on my check

Gravity Support Forums » Plugin Support » Gravity Forms

waujaneju
Member

Following the advice provided by Kevin Flahaut on this page: http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
I added the following code to my wordpress css:

[css]
/* gravity forms text field */
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] { border:1px solid #dddddd; background-color:#f8f9fb; }

    /* gravity forms drop-down (select) field */
    body .gform_wrapper .gform_body .gform_fields .gfield select {border:1px solid #dddddd; background-color:#f8f9fb; }

    /* gravity forms textarea field */
    body .gform_wrapper .gform_body .gform_fields .gfield textarea {border:1px solid #dddddd; background-color:#f8f9fb; }

    /* gravity forms checkbox inputs */
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li input[type=checkbox] {border:1px solid #aec1d2;}

It worked perfectly EXCEPT the checkbox inputs, as you can see here:

http://dev12.campaignadvantage.com/action/volunteer/

So I tried Kevin's original code example in my css, which should have made the checkbox input borders red, but it didn't. Could you please help me figure out why Kevin's code does not appear to be working for my checkbox inputs, even though its working perfectly for the other fields?

Thanks!

Posted 13 years ago on Wednesday October 19, 2011 | Permalink

Kevin Flahaut
Administrator

Style support for checkboxes and radio inputs is very limited and varies quite a bit by each browser. The border style is only supported in a few. You're rule is being applied properly, but the browser is simply ignoring it for the checkbox control.

screenshot: http://bit.ly/qcWvtt ( see the highlighted CSS rule being applied )

reference: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

I'll revisit the samples in the documentation and see about changing that. The border property was simply a random example, but I can see that it might be misleading given the constraints of styling the checkbox inputs.

Posted 13 years ago on Wednesday October 19, 2011 | Permalink
waujaneju
Member

Thanks, Kevin!

Posted 13 years ago on Wednesday October 19, 2011 | Permalink
Kevin Flahaut
Administrator

My pleasure. You're very welcome.

Posted 13 years ago on Wednesday October 19, 2011 | Permalink

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