wordpress - 无法为 Wordpress 设置联系表格 7 的样式

Question

有问题的网站：https ://loopcycle.io/contact-us/

我找到了应该改变表单外观的代码，但它什么也没做，我很困惑，看起来模板中的某些东西或 wordpress 本身阻止了这些？

我为使输入框变白而添加的代码：

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

并将提交按钮居中：

input.wpcf7-form-control.wpcf7-submit {
   display: block;
   margin: 0 auto;
}

表格的代码是：

<div class="form-group" style="padding-bottom: 30px;">[radio contact-reason use_label_element default:1 "Curious about Loopcycle" "Demo for manufacturers" "Demo for end users" "Collaboration" "Careers & Internships" "Speaker request" "Press" "Other"]</div>
<div class="form-group">[text* your-name placeholder "Your Name (required)"]</div>
<div class="form-group">[email* your-email placeholder "Your Email (required)"]</div>
<div class="form-group">[text your-company placeholder "Your Company"]</div>
<div class="form-group">[text* your-subject placeholder "Subject (required)"]</div>
<div class="form-group">[textarea your-message placeholder "Your message"]</div>
<div class="submit-group">[submit class:eut-extra-round "Send your message"]</div> 

我觉得我点击了所有可能的选项卡和面板，试图找出覆盖我的编辑的内容，但找不到任何东西。

标签： wordpressstylingcontact-form-7

Answer 1

试试这个 CSS。这将是工作

input.wpcf7-form-control.wpcf7-submit {
    display: block !important;
    margin: 0 auto !important;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
    background-color: #fff !important;
    color: #000 !important;
    width: 50% !important;
    margin: 10px auto !important;
}
span.wpcf7-form-control.wpcf7-radio > span {
    width: 50% !important;
    margin: 0 auto !important;
}