HTML 表单上的 Wordpress Divi 自定义 CSS

Question

我有一个 wordpress 网站，我正在使用 Divi 主题对其进行自定义。我在“代码”模块中添加了一个 HTML 表单，效果很好。但是我无法确定应该将 CSS 放在哪里。我尝试了行和模块本身的“自定义 CSS”区域。也许代码有问题？我已经把它贴在下面了。谢谢！

input[type=text], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    input[type=number], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    input[type=submit] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    input[type=submit]:hover {
      background-color: #45a049;
    }
    
    div {
      border-radius: 5px;
      background-color: #ffffff;
      padding: 20px;
    }

    <font face="helvetica"
    
    <META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    <!-- ---------------------------------------------------------------------- -->
    <!-- NOTE: Please add the following <FORM> element to your page. -->
    <!-- ---------------------------------------------------------------------- -->
    <form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" target='_parent'>
    
    <input type=hidden name="oid" value="00D0Y0000034cvq">
    <input type=hidden name="retURL" value="https://globalstudyuk.com/success-qatar">
    
    <!-- ---------------------------------------------------------------------- -->
    <!-- NOTE: These fields are optional debugging elements. Please uncomment -->
    <!-- these lines if you wish to test in debug mode. -->
    <!-- <input type="hidden" name="debug" value=1> -->
    <!-- <input type="hidden" name="debugEmail" -->
    <!-- value="kasper.martlev@weare4c.com"> -->
    <!-- ---------------------------------------------------------------------- -->
    
    <label for="first_name">First Name</label>   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>
    
    <label for="last_name">Last Name</label>   <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br>
    
    Date of Birth:  <span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="12" type="text" name="inputBox" placeholder=" DD/MM/YYYY" /></span><br><br>
    
    <label for="mobile">Mobile</label>   <input id="mobile" maxlength="40" name="mobile" size="20" type="number" pattern="\d*" required=true/><br><br>
    
    <label for="email">Email</label>   <input id="email" pattern="[^ @]*@[^ @]*" maxlength="80" name="email" size="20" type="text" required=true /><br><br>
    
    Current/Previous School/University:   <input id="00N0Y00000RWiNZ" maxlength="100" name="00N0Y00000RWiNZ" size="20" type="text" required=true /><br><br>
    
    Course you would like to study:   <input id="00N0Y00000RWiNi" maxlength="255" name="00N0Y00000RWiNi" size="20" type="text" required=true /><br><br>
    
    <label for="lead_source">Where did you hear about us?</label>   <select id="lead_source" name="lead_source"><option value="">--None--</option>
    <option value="Instagram">Instagram</option>
    <option value="Facebook">Facebook</option>
    <option value="Twitter">Twitter</option>
    <option value="Google">Google</option>
    <option value="British Council">British Council</option>
    <option value="Career day">Career day</option>
    <option value="Deferred">Deferred</option>
    <option value="Flier / Poster">Flier or Poster</option>
    <option value="GSUK Alumni">GSUK Alumni</option>
    <option value="GSUK_Website">GSUK_Website</option>
    <option value="Other_(Please specify)">Other</option>
    <option value="Referral_(Please specify)">Referral</option>
    <option value="School Counsellor_(Please specify)">School Counsellor</option>
    <option value="School Presentation">School Presentation</option>
    <option value="School Tour">School Tour</option>
    <option value="University Website_(Please specify)">University Website</option>
    <option value="Web">Web</option>
    </select><br><br>
    
    <input type=hidden id="00N0Y00000RWvPA" name="00N0Y00000RWvPA" type="checkbox" value="1" />
    
    <input type=hidden id="country_code" name="country_code"value="QA" />
    
    <input type=hidden id="city" name="city" value="Doha" />
    
    <center><input type="submit" name="submit"></center>
    
    
    
    </form>

Answer 1

我们通过删除解决了这个问题

div {
      border-radius: 5px;
      background-color: #ffffff;
      padding: 20px;
    }

虽然这在大多数页面上都可以正常工作，但它会导致白框出现在奇怪的地方，这可能是由于我们使用 CMS 在列中构建页面。

Answer 2

登录到您的仪表板 -> 点击外观 -> 点击自定义 -> 点击附加 CSS 并将您的 CSS 粘贴到其中。