Question

我需要为“#recaptcha_image”指定两种不同的宽度由于recatcha图像放在#recaptcha_image div中，我在CSS中添加了自定义宽度，如下所示：

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

由于我无法更改DIV ID，如何在同一CSS文件中为#recaptcha_image指定第二个宽度？我只能使用一个CSS文件，因为我有一个共同的标题，其中包括CSS文件。

感谢。

Answer 1

您可以在CSS中创建一个具有不同宽度的类：

#recaptcha_image img.newWidth {width: 100px }

然后，您必须在所需的时间将该类添加到元素中。

我知道您在问题中未提及JavaScript，但您也可以使用JavaScript在必要时使用element.style.width = '100px';

更改宽度

Answer 2

下面从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');
});

这是在应用上述内容后减小Captcha单元大小的CSS。缩放媒体留给你一个练习......

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

CSS - reCAPTCHA图像宽度

2 个答案: