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

登录到仪表板->单击外观->单击自定义->单击其他CSS，然后将CSS粘贴到其中。

Answer 2

我们通过删除

解决了该问题

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

尽管这在大多数页面上都能正常工作，但是却导致白框出现在陌生的地方，大概是由于CMS我们在列中使用了构建页面。