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.

Answer 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';