通过CSS的::placeholder伪元素可调整表单输入框提示文字颜色，解决默认颜色过浅导致的可视性问题，建议使用#999等中灰色并添加浏览器前缀以兼容不同浏览器，提升表单可用性。
表单输入框的 placeholder 颜色太浅，会导致用户难以看清提示文字，影响使用体验。可以通过 CSS 的 ::placeholder 伪元素来设置更清晰、合适的颜色。
使用 ::placeholder 修改颜色
::placeholder 是用于选中输入框中占位符文本的伪元素，支持大多数现代浏览器。你可以直接为它设置颜色、字体或其他样式。
input::placeholder {
color: #999;
opacity: 1; /* 防止某些浏览器降低透明度 */
}
兼容不同浏览器
为了确保在更多浏览器中生效，建议加上厂商前缀：
input::-webkit-input-placeholder { /* Chrome, Safari, Edge */
color: #999;
opacity: 1;
}
input::-moz-placeholder { / Firefox 19+ /
color: #999;
opacity: 1;
}
input:-ms-input-placeholder { / IE 10+ /
color: #999;
opacity: 1;
}
input::placeholder { / 标准语法 /
color: #999;
opacity: 1;
}
根据场景调整颜色
选择 placeholder 颜色时，建议满足以下条件：
立即学习“前端免费学习笔记（深入）”；
- 与输入框背景有足够对比度，但不要太刺眼
- 避免使用纯黑或纯白，可选用中灰色（如 #666、#999）
- 在暗色主题下，使用稍亮的灰色（如 #aaa）
基本上就这些。合理设置 placeholder 颜色能提升表单可用性，不复杂但容易忽略。
