Contact Form 7生成的submit按钮字体族CSS不生效，求解决方案

问题描述 #

我需要修改Contact Form 7生成的表单提交按钮（input type="submit"）的字体族。此前已通过::placeholder伪类成功修改了其他表单字段的占位符字体族及颜色，但针对当前提交按钮编写的CSS样式被忽略，现寻求可行解决方案。

按钮HTML标记： #

<input class="wpcf7-form-control wpcf7-submit has-spinner" id="submit-button" type="submit" value="Send request">

已尝试的CSS代码： #

#submit-button {
    font-family: "Maiden Orange", serif;
    font-weight: 400;
    font-style: normal;
    background-color: transparent;
    font-size: 26px;
    text-transform: uppercase;
    color: white;
    border: none;
    background-image: url('...');
    background-position: center;
    background-repeat: no-repeat;
}
#submit-button::hover {
    border: none;
    background-color: transaprent; /* 拼写错误：应为transparent */
}

可行解决方法 #

• 修正拼写错误
  代码中transaprent是拼写错误，正确应为transparent，该错误会导致hover样式解析异常，甚至影响浏览器对整个按钮样式的优先级判断。

• 提升选择器优先级
  Contact Form 7自带的默认样式优先级可能高于你的自定义样式，尝试使用更具体的选择器：

  .wpcf7-form #submit-button.wpcf7-submit {
      font-family: "Maiden Orange", serif;
      font-weight: 400;
      font-style: normal;
      background-color: transparent;
      font-size: 26px;
      text-transform: uppercase;
      color: white;
      border: none;
      background-image: url('...');
      background-position: center;
      background-repeat: no-repeat;
  }
  .wpcf7-form #submit-button.wpcf7-submit:hover {
      border: none;
      background-color: transparent;
  }
  

• 确认字体已加载
  检查"Maiden Orange"字体是否已正确引入站点（如通过本地字体文件或字体服务），若字体未加载，浏览器会自动回退到serif字体，视觉上表现为样式未生效。

• 临时使用!important（备选方案）
  若上述方法均无效，可临时用!important强制覆盖原有样式，但不推荐长期使用，会增加后续样式维护难度：

  #submit-button {
      font-family: "Maiden Orange", serif !important;
      /* 其他样式保持不变 */
  }
  

• 用开发者工具排查
  打开浏览器F12开发者工具，定位到提交按钮元素，查看「Styles」面板：

  • 检查你的自定义样式是否被划掉（说明被更高优先级样式覆盖）
  • 确认是否存在语法错误导致样式未被解析

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