Question

我正在尝试使用联系表单7来创建自定义样式的表单。我正在使用WP Joints主题和基础。

前4个字段在chrome或firefox中不可编辑，但是注释字段是。所有字段都在IE中工作（奇怪的是）。我在做什么导致了这个？样式需要以这种方式为客户提供，但我可能正在使用某些改变最终产品的CSS。

这是CSS

#contact-bb {
    background-image: url("http://delindesign.com/adlhochgroup/wp-content/uploads/2016/10/contact-bg.jpg");
    background-repeat: no-repeat;
    background-position:0% 30%;
    background-size: 100%;
}

.contact-header {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    color: #8ca408;
    text-align: center;
    padding: 3rem 0 3rem 0;
    }

#first_margin {
margin-bottom:.5rem !important; 
    }

#comments_margin {
padding-top:.5rem !important;   
    }


.wpcf7-email {
margin-bottom: .5rem !important;
}


.wpcf7-text {
background-color: #efefef;
}

.wpcf7-textarea {
background-color: #efefef;
}
.wpcf7-submit {
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
color: #FFFFFF;
text-align: center;
border: none;
padding: .5rem 4rem .5rem 4rem;
display: inline-block;
margin: 0 0 1rem 0;
background-color: #8ca408; 
}


span.wpcf7-not-valid-tip { display: inline !important;}

#cf7-left {
    padding: 0 .5rem .5rem 0 !important;
}

#cf7-right {
    padding: 0 0 .5rem 0 !important;
}
.wpcf7-text {
    margin-bottom:0;
}



#no-pad {
    padding:0 !important;
    }

.pad-left-1c {
    padding-left: 5rem;
        }

.bold-contact {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .5rem;
    line-height: 1.33;
    color: #333333;
    text-align: left;
    }



    #contact-padding{
    padding-top: 1.8rem !important;
    }

    .reg-contact {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    margin: auto;
    line-height: 1.33;
    color: #333333;
    text-align: left;
    }

和表格

<div id="cf7-left" class="large-6 small-6 columns">
            [text* firstname placeholder id:first_margin akismet:author "First Name"]
            [text lastname placeholder "Last Name"]
        </div>

        <div id="cf7-right" class="large-6 small-6 columns">
            [email email placeholder "Email"]
            [text company placeholder "Company"]
        </div>


<div class="large-12 pad-top">
        [textarea* comments placeholder id:comments_margin "Comments"]
        [submit id:submit-button "Submit"]
    </div>

Answer 1

问题是我把它们放在基础行和表格中。基金会的领域是可编辑的。我的解决方案是用显示器制作一个div：table并使字段50％宽度的表格单元格向左浮动。到目前为止，它已在所有浏览器中运行。

联系表单7文本字段不可编辑

1 个答案: