WordPress Divi主题构建器表单CSS样式失效问题求助

我在WordPress的Divi Builder工具中为表单添加自定义CSS代码后，实际显示效果和预期完全不符。尝试过重写完整CSS代码、将代码嵌入HTML标签等方法，都没有效果。

自定义CSS代码 #

._form-content {
  display: flex;
  flex-direction: row;
  gap: 7px;
}
input {
  display: flex;
  width: 252px;
  height: 34px;
  border-radius: 8px;
  fill: #f9f9f9;
  border: 1px solid #b0b0b0;
}
input:focus {
  outline-color: #821313;
}
button {
  width: 286px;
  height: 34px;
  border-radius: 10px;
  background-color: #821313;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  transition: all 0.3 ease;
}
button:hover {
  background-color: #5c0d0d;
}

效果与报错说明 #

• 预期效果：表单元素横向排列，输入框宽度252px、高度34px，按钮宽度286px、高度34px，元素间有7px间距，按钮hover时颜色加深
• 实际效果：表单未按横向布局展示，自定义样式完全未生效
• 报错信息：CSS代码存在语法错误（transition: all 0.3 ease; 缺少时间单位）

问题排查与解决建议 #

1. 修复CSS语法错误
   按钮样式里的transition: all 0.3 ease;缺少时间单位s，需改为transition: all 0.3s ease;。语法错误会导致浏览器解析CSS时中断，后续样式无法生效。

2. 提升选择器优先级
   Divi Builder自带样式优先级较高，需给选择器添加更具体的父类前缀，确保自定义样式覆盖默认样式。示例修改后的代码：

   /* 假设表单父容器有Divi默认的.et_pb_module类 */
   .et_pb_module ._form-content {
     display: flex;
     flex-direction: row;
     gap: 7px;
     align-items: center; /* 确保输入框与按钮垂直居中 */
   }
   .et_pb_module ._form-content input {
     display: block; /* input无需flex布局，block更合适 */
     width: 252px;
     height: 34px;
     border-radius: 8px;
     background-color: #f9f9f9; /* 替换fill为background-color，fill是SVG属性 */
     border: 1px solid #b0b0b0;
     box-sizing: border-box; /* 避免边框撑大元素宽度 */
   }
   .et_pb_module ._form-content input:focus {
     outline: 2px solid #821313; /* 明确outline样式，消除浏览器默认差异 */
     outline-offset: 0;
   }
   .et_pb_module ._form-content button {
     width: 286px;
     height: 34px;
     border-radius: 10px;
     background-color: #821313;
     color: #fff;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: 600;
   }
   .et_pb_module ._form-content button:hover {
     background-color: #5c0d0d;
   }
   

3. 正确添加自定义CSS的位置
   在Divi中推荐通过以下方式添加：

   • 全局样式：进入Divi → Theme Options → Custom CSS粘贴代码
   • 单个模块样式：打开模块设置 → Advanced → Custom CSS，在对应输入框添加（需匹配模块内元素选择器）

4. 清除缓存
   修改后清除WordPress缓存、浏览器缓存，确保新样式被加载。

内容的提问来源于stack exchange，提问作者Gabriel Cintra