表单输入框聚焦与失焦状态文本颜色不同，如何统一设置为白色？

出现该问题的核心原因是当前CSS样式中，仅为输入框的失焦状态配置了白色文本，聚焦状态的文本颜色被浏览器默认样式或其他更高优先级的样式覆盖为了黑色，可通过以下两种方案解决：

• 方案1：全局统一样式（优先级最高，适配所有状态，最为推荐）
  直接为输入框元素配置统一的文本颜色规则，会自动应用到聚焦、失焦等所有状态：

/* 可根据业务场景调整选择器，比如加上自定义类名、限制父容器范围 */
input, textarea {
  /* 自定义样式优先级足够的情况下可以去掉!important */
  color: #ffffff !important;
  /* 若需要同步调整占位符文本颜色可加以下代码 */
  &::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
}

• 方案2：分别指定两种状态的样式
  如果原有样式已经单独配置了聚焦、失焦的规则，直接修改对应颜色配置即可，其他原有样式（比如聚焦边框高亮、阴影效果）可以保留：

/* 失焦状态文本颜色 */
.contact-form input {
  color: #ffffff;
}
/* 聚焦状态文本颜色 */
.contact-form input:focus {
  color: #ffffff;
}

如果样式不生效，可以打开浏览器开发者工具（F12），选中输入框分别切换聚焦、失焦状态，查看对应样式的覆盖来源，针对性调整选择器优先级即可。

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