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.

CSS for ReCaptcha

  1. Jez
    Member

    Hello All,

    I have a problem trying to style the Re-Captcha div.

    http://img220.imageshack.us/img220/3166/screenierecaptcher.png

    What I want is to make the labels left align on the entire form except on RE-Captcha where I want the image to be left aligned either:

    with the label above
    no label at all (re-captcha is pretty self explanatory)

    As you can see from the image above, the label pushes the captcha out of its containter in some browsers, though in some versions of IE it seems ok.

    Ive looked at the form css and cannot fathom how I would go about making this change, as the php generates the divs etc. If I add a custom style, it does not seem to kill the labels container...

    Im a bit stuck!

    Posted 9 years ago on Friday November 19, 2010 | Permalink
  2. I'm not clear on what you want to do here. You want all the fields to have left labels except for the reCaptcha container - you want it to have a top label?

    Also, a screencap is nice, but doesn't let me inspect/test on your form. Can you include a URL to your form?

    Posted 9 years ago on Friday November 19, 2010 | Permalink
  3. Jez
    Member

    Hi Kevin,

    Yes, I want al fields to have left labels except for re-captcha where I would like it top level, or removed entirely.

    It actually displays "top align" in IE, but I think that is just because it is dropping down due to the container size, in FireFox it displays the label left align as per the screen shot I posted.

    The URL is below, the form is conditional so just alter the drop down list to reveal the full form:

    http://debtadviceuk.net/

    Thanks for your help.

    Posted 9 years ago on Friday November 19, 2010 | Permalink
  4. The containing list item has a unique ID so you can use CSS inheritance to do pretty much anything you need.

    Try adding this to your theme stylesheet.

    body .gform_wrapper li#field_1_16 label {display:none}

    test screenshot

    Posted 9 years ago on Friday November 19, 2010 | Permalink
  5. Jez
    Member

    Thanks for your help but that did not work. The html I dont want shown is:

    '<label for="input_3_16" class="gfield_label">Enter Code</label>'

    I noticed it was 3_16 as opposed to 1_16 and changed that, which did the left align like I wanted, however, the message "enter the two words below" dissapreared from re-captcha, which I really need if the label is also going to be missing.

    Actually, if you check your own screen shot you can see that label missing too...

    Do you have any other suggestions?

    Posted 9 years ago on Saturday November 20, 2010 | Permalink
  6. No, the containing list ID that I'm targeting is correct. Look at your markup closely and you'll see that it's "field_1_16".

    Use this instead. It only targets the label with the "gfield_label" class so the reCaptcha div won't inherit from the rule.

    body .gform_wrapper li#field_1_16 label.gfield_label {display:none}

    screenshot

    Posted 9 years ago on Saturday November 20, 2010 | Permalink
  7. Jez
    Member

    Hi Kevin,

    I have different copies of that form in different places, we were looking at different ones, sorry!

    Anyway, your latest tweak to just target gfield_label did the trick.

    Thanks very much your your help.

    Jez

    Posted 9 years ago on Sunday November 21, 2010 | Permalink
  8. Understood. Glad that helped you out. Thanks for the update.

    Posted 9 years ago on Sunday November 21, 2010 | Permalink