Safari浏览器中Input占位符文本不显示问题求助

可能的遗漏点及修复步骤 #

1. 单独提升Safari占位符样式优先级 #

Safari中，::-webkit-input-placeholder的文本样式容易被全局规则覆盖，需单独为其明确设置样式并提升优先级，将以下代码放在现有样式之后：

/* 单独适配Safari占位符 */
#mce-EMAIL::-webkit-input-placeholder {
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  font-size: 6vw !important;
  letter-spacing: -0.057em;
}

2. 移除冗余的onfocus属性 #

输入框上的onfocus="this.placeholder='Enter your email'"属于冗余操作，反而可能在Safari中触发渲染异常，直接删除该属性：

<input type="email" placeholder="Enter your email" name="EMAIL" id="mce-EMAIL" class="required email" required="" aria-required="true">

3. 统一普通状态与 autofill 状态的文本样式 #

当前仅针对 autofill 状态设置了-webkit-text-fill-color，普通状态下输入框的文本颜色继承可能导致占位符被覆盖，补充普通状态样式：

#mce-EMAIL {
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
  background-color: #ED3A38 !important;
}

4. 排查Mailchimp内置样式冲突 #

Mailchimp会为表单添加默认样式，可能覆盖自定义规则。通过Safari开发者工具查看输入框的计算样式，确认占位符的color、opacity等属性是否被其他规则覆盖，若有冲突，使用更具体的选择器（如结合ID#mce-EMAIL）强化自定义样式的优先级。

5. 兼容Safari隐私机制 #

Safari的“智能防跟踪”功能可能干扰表单渲染，可临时关闭该设置测试。若问题消失，确保占位符样式的opacity明确设为1，颜色对比足够清晰即可兼容。

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