CSS - reCAPTCHA image width

Question

I need to specify two different widths for "#recaptcha_image" As the recatcha image is placed in #recaptcha_image div, I had added custom width in my CSS, as following:

#recaptcha_image img {width: 200px !important; height: 38px !important; }

As I can not change the DIV id, how can i specify the second width for #recaptcha_image in the same CSS file? I can use only ONE CSS file because i have a common header, which includes CSS file.

Thanks.

Solution 1

You could create a class in the CSS with a different width:

#recaptcha_image img.newWidth {width: 100px }

You would then have to add that class to the element at the required time.

I know you didn't mention JavaScript in the question, but you could also use JavaScript to change the width when necessary by using element.style.width = '100px';

Solution 2

Following removes the fixed attributes from the ASPX control and adds a couple of classes for formatting.

$(document).bind('pageinit', function () {
    var cell = $('#recaptcha_response_field');
    cell.removeAttr('style');
    cell = $('.recaptcha_image_cell');
    cell.addClass('CaptchaCell');
    cell.removeAttr('width');
    cell = $('#recaptcha_image');
    cell.addClass('CaptchaWidth');
    cell.removeAttr('style');
    cell = $('#recaptcha_image img');
    cell.addClass('CaptchaWidth');
    cell.removeAttr('width');
    cell.removeAttr('height');
    cell.removeAttr('style');
});

This is the CSS to reduce the size of the Captcha cells after the above is applied. Scaling for media is left as an exercise for you...

/* Captcha smallest settings */
.CaptchaCell {
    width: 202px;
}

.CaptchaWidth {
    width: 200px;
    height: 57px;
}
.recaptchatable {
    width: 252px;
}
#recaptcha_response_field {
    width: 200px;
    border: 1px solid #3c3c3c;
}

#recaptcha_tagline {
    display:none;
}
#recaptcha_logo {
    display:none;
}