我的CSS搞砸了我的recaptcha

Question

我正在开发一个网站，需要在联系表单上提供某种形式的垃圾邮件保护。因此，我被告知我需要使用recaptcha来防止垃圾邮件。

创建表单并添加CSS后，我实现了验证码。出于某种原因，似乎我的风格搞砸了。

这是一个显示发生了什么的屏幕截图

CSS

#formContainer {
    margin-left:auto;
    margin-right:auto;
    width: 500px;
    height: auto;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}
form {
    margin: 0 auto;
    margin-top: 20px;
}
label {
    color: #555;
    display: inline-block;
    margin-left: 18px !important;
    padding-top: 10px;
    font-size: 14px;
}

input, textarea{
    outline:none;
}
    input[type=text]{
        color: #777;
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        width: 290px;
        height: 35px;
    }

    input[type=text]#email{
        margin-left:52px;
    }

    #formComments{
        margin-left:18px;
        height: 115px;
        width:293px;
    }


input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #609941; /*IE fallback*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#609941), to(#609941));
    background-image: -moz-linear-gradient(top left 90deg, #609941 0%,#609941 100%);
    background-image: linear-gradient(top left 90deg, #609941 0%, #609941 100%);
    border-radius: 30px;
    border: 1px solid #66add6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
}

HTML

<div id="formContainer">
<iframe src="http://inspirafs.com/totalira/contactext.asp" frameborder="0" height="650" width="100%" scrolling="no">Sorry your browser does not support IFRAMES.</iframe>
</div>

Answer 1

我将假设您正在使用recaptchalib.php文件。

基本上，你的input造型推动了一切。您需要做的是设置规则以覆盖验证码元素上的input。

这样的事情应该有效：

#recaptcha_response_field {
padding:0;
margin:0;
height:auto;
width:auto;
}