0
我正在嘗試使用聯繫表單7創建一個自定義樣式的表單。我正在使用WP Joints主題和基礎。聯繫表單7文本字段不可編輯
前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>
訪問您的鏈接我可以編輯所有輸入。我在Windows 10上使用Chrome 53. –
我的錯誤 - 我修復了它,但沒有更新。問題是我把它們放在基礎行和表中。我的解決方案只是使用display:table和製作50%寬度表格單元格的div。謝謝回覆。 –