Remove frameborder attribute on the iframe of Recaptcha

Question

I need to know where I can change this line of code of Google recaptcha code:

The frameborder attribute on the iframe element is obsolete. I would like to change the frameborder="0" with in the iframe to something like border:none;.

when validating it gives an error saying "The frameborder attribute on the iframe element is obsolete. Use CSS instead.".

Any ideas of how to fix this?

 <dd class="auto recaptcha">
    <p class="cap">ReCAPTCHA entry is for testing whether you are a human visitor and to prevent automated spam submissions.</p>
    <div class="recaptcha-item">
      <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfaXscSAAAAAMcN5Mfvza9CyYfV7K5__BbQiPBN"></script>

<noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfaXscSAAAAAMcN5Mfvza9CyYfV7K5__BbQiPBN" height="300" width="500" frameborder="0"></iframe><br/>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>                </div>

              <p><sup class="required">*</sup> = Required Fields</p>
    </dd>

Screenshot of wf4's answer

Answer 1

ok, so here is another solution... The question was "Remove frameborder attribute on the iframe of Recaptcha". This question must have come about as a result of the w3c validator. In your code there is a script which will inject HTML into your page, doing so will include all the HTML and CSS needed to style the content. My first answer was to remove this script and use just the iframe in the <noscript> tags, however, this is not the problem. The problem is the content of the <noscript> tags and not the actual recapthcha. So my second answer is to do one of the following:

A: Remove the frameborder="0" from the iframe

<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfaXscSAAAAAMcN5Mfvza9CyYfV7K5__BbQiPBN" height="300" width="500"></iframe>

which would fix the validation problem.

B: Remove the entire <noscript> section if you don't want an unformatted form when scripts are not available.

There are several other attempts to style the contents of an iframe but they use javascript and modern browsers will not allow this when the sites are not part of the same domain.

Answer 2

The answer is in your edit. There is a script, src = http://www.google.com/recaptcha/api/challenge which will use javascript to create an iframe in your site, the noscript bit will be used if scripts are not available. so if you remove

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfaXscSAAAAAMcN5Mfvza9CyYfV7K5__BbQiPBN"></script>

and the <noscript> </noscript> tags, BUT NOT THE CONTENT, then you can remove the frameborder="0" which you don't want. so your complete code would be:

 <dd class="auto recaptcha">
<p class="cap">ReCAPTCHA entry is for testing whether you are a human visitor and to prevent automated spam submissions.</p>
<div class="recaptcha-item">


<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfaXscSAAAAAMcN5Mfvza9CyYfV7K5__BbQiPBN" height="300" width="500"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
            </div>

          <p><sup class="required">*</sup> = Required Fields</p>
</dd>

for the styling, this would also have been added using the script, this should be what you will need to include in your head

<style type="text/css">
.recaptchatable td img{display:block}.recaptchatable .recaptcha_r1_c1{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') 0 -63px no-repeat;width:318px;height:9px}.recaptchatable .recaptcha_r2_c1{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -18px 0 no-repeat;width:9px;height:57px}.recaptchatable .recaptcha_r2_c2{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -27px 0 no-repeat;width:9px;height:57px}.recaptchatable .recaptcha_r3_c1{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') 0 0 no-repeat;width:9px;height:63px}.recaptchatable .recaptcha_r3_c2{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -18px -57px no-repeat;width:300px;height:6px}.recaptchatable .recaptcha_r3_c3{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -9px 0 no-repeat;width:9px;height:63px}.recaptchatable .recaptcha_r4_c1{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -43px 0 no-repeat;width:171px;height:49px}.recaptchatable .recaptcha_r4_c2{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -36px 0 no-repeat;width:7px;height:57px}.recaptchatable .recaptcha_r4_c4{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -214px 0 no-repeat;width:97px;height:57px}.recaptchatable .recaptcha_r7_c1{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -43px -49px no-repeat;width:171px;height:8px}.recaptchatable .recaptcha_r8_c1{background:url('http://www.google.com/recaptcha/api/img/red/sprite.png') -43px -49px no-repeat;width:25px;height:8px}.recaptchatable .recaptcha_image_cell center img{height:57px}.recaptchatable .recaptcha_image_cell center{height:57px}.recaptchatable .recaptcha_image_cell{background-color:white;height:57px}#recaptcha_area,#recaptcha_table{width:318px!important}.recaptchatable,#recaptcha_area tr,#recaptcha_area td,#recaptcha_area th{margin:0!important;border:0!important;padding:0!important;border-collapse:collapse!important;vertical-align:middle!important}.recaptchatable *{margin:0;padding:0;border:0;font-family:helvetica,sans-serif;font-size:8pt;color:black;position:static;top:auto;left:auto;right:auto;bottom:auto}.recaptchatable #recaptcha_image{position:relative;margin:auto}.recaptchatable #recaptcha_image #recaptcha_challenge_image{display:block}.recaptchatable #recaptcha_image #recaptcha_ad_image{display:block;position:absolute;top:0}.recaptchatable img{border:0!important;margin:0!important;padding:0!important}.recaptchatable a,.recaptchatable a:hover{cursor:pointer;outline:none;border:0!important;padding:0!important;text-decoration:none;color:blue;background:none!important;font-weight:normal}.recaptcha_input_area{position:relative!important;width:153px!important;height:45px!important;margin-left:7px!important;margin-right:7px!important;background:none!important}.recaptchatable label.recaptcha_input_area_text{margin:0!important;padding:0!important;position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;background:none!important;height:auto!important;width:auto!important}.recaptcha_theme_red label.recaptcha_input_area_text,.recaptcha_theme_white label.recaptcha_input_area_text{color:black!important}.recaptcha_theme_blackglass label.recaptcha_input_area_text{color:white!important}.recaptchatable #recaptcha_response_field{width:153px!important;position:relative!important;bottom:7px!important;padding:0!important;margin:15px 0 0 0!important;font-size:10pt}.recaptcha_theme_blackglass #recaptcha_response_field,.recaptcha_theme_white #recaptcha_response_field{border:1px solid gray}.recaptcha_theme_red #recaptcha_response_field{border:1px solid #cca940}.recaptcha_audio_cant_hear_link{font-size:7pt;color:black}.recaptchatable{line-height:1!important}#recaptcha_instructions_error{color:red!important}.recaptcha_only_if_privacy{float:right;text-align:right}#recaptcha-ad-choices{position:absolute;height:15px;top:0;right:0}#recaptcha-ad-choices img{height:15px}.recaptcha-ad-choices-collapsed{width:15px;height:15px;display:block}.recaptcha-ad-choices-expanded{width:75px;height:15px;display:none}#recaptcha-ad-choices:hover .recaptcha-ad-choices-collapsed{display:none}#recaptcha-ad-choices:hover .recaptcha-ad-choices-expanded{display:block}
.recaptcha_is_showing_audio .recaptcha_only_if_image,.recaptcha_isnot_showing_audio .recaptcha_only_if_audio,.recaptcha_had_incorrect_sol .recaptcha_only_if_no_incorrect_sol,.recaptcha_nothad_incorrect_sol .recaptcha_only_if_incorrect_sol{display:none !important}
</style>