Geek asks and answers

CSS - reCAPTCHA image width

I need to specify two different widths for "#recaptcha_image" Since the recatcha image is placed in the #recaptcha_image div, I added a custom width to my CSS, as shown below:

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

How can I not change the div identifier, how can I specify a second width for #recaptcha_image in the same CSS file? I can use only one CSS file, because I have a common header that includes a CSS file.

Thank.

+3
source share
2 answers

You can create a class in CSS with a different width:

#recaptcha_image img.newWidth {width: 100px }

Then you will need to add this class to the element at the right time.

, JavaScript , JavaScript element.style.width = '100px';

+1

ASPX .

$(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');
});

CSS, Captcha . ...

/* 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;
}
+1

More articles:


All Articles