iPhone端Safari中input、select元素color属性设置不生效问题求解

核心原因梳理 #

• 重复属性覆盖：你提供的CSS代码中连续声明了3次-webkit-text-fill-color，按照CSS层叠规则，仅最后一条-webkit-text-fill-color: rgb(100, 200, 0);会生效，前两条声明直接被忽略，导致你预期的文本颜色没有被正常应用。
• Safari自动填充样式劫持：iPhone Safari对触发过自动填充的表单元素，会强制套用内置的:-webkit-autofill、.internal-autofill-selected伪类/类样式，该内置样式优先级极高，普通自定义样式哪怕添加了!important也可能被覆盖。
• 选择器优先级不足：WPForms插件自带的表单默认样式权重可能高于你编写的自定义样式，也可能存在页面其他全局input样式覆盖了你的规则。

可行修复方案 #

将你现有的CSS替换为如下版本即可：

/* 新增body前缀提高选择器优先级，同时覆盖普通状态和自动填充状态 */
body form#wpforms-form-2408 input,
body form#wpforms-form-2408 select,
body form#wpforms-form-2408 input:-webkit-autofill,
body form#wpforms-form-2408 input:-webkit-autofill:hover, 
body form#wpforms-form-2408 input:-webkit-autofill:focus,
body form#wpforms-form-2408 select:-webkit-autofill,
body form#wpforms-form-2408 select:-webkit-autofill:hover,
body form#wpforms-form-2408 select:-webkit-autofill:focus {
    color: pink !important;
    -webkit-text-fill-color: pink !important;
    /* 不需要Safari自动填充默认淡黄色背景可以保留下面这行，不需要可删除 */
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    height: auto;
    min-height: 78px;
    box-sizing: border-box;
    background: red;
    line-height: unset !important;
    position: relative !important;
    padding-top: 0;
    padding-bottom: 0;
}

核心修改点说明 #

1. 新增body前缀提高选择器优先级，避免被WPForms自带的表单样式覆盖
2. 补充了Safari自动填充伪类的匹配规则，覆盖系统默认的自动填充样式
3. 删除了重复的-webkit-text-fill-color声明，仅保留需要的颜色值，且添加!important提高优先级
4. 可选添加-webkit-box-shadow属性，用内阴影覆盖Safari自动填充时默认的淡黄色背景

如果修改后仍未生效，可以使用Safari开发者工具的移动端调试模式，选中对应input元素查看已应用的样式列表，确认是否存在其他更高优先级的样式覆盖了自定义规则。

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