placeholder 是输入框为空且未获焦点时显示的提示文字，可用 ::placeholder 伪元素统一设置样式，现代浏览器均支持，无需兼容旧前缀；其显示逻辑为自动隐藏于聚焦或输入后，不可用 JS 直接操作文本内容。
输入框未填写时显示的提示文字，就是 placeholder，用 ::placeholder 伪元素就能精准控制它的样式，而且兼容性足够好（Chrome、Firefox、Safari、Edge 均支持）。
直接对 input 或 textarea 使用 ::placeholder 即可：
input::placeholder,
textarea::placeholder {
color: #999;
font-size: 14px;
font-style: italic;
}现代浏览器已统一支持标准 ::placeholder，但若需兼容极老版本（如 Chrome 49–56、Firefox 19–50），可加前缀：
::-webkit-input-placeholder（旧版 WebKit）::-moz-placeholder（旧版 Firefox，透明度失效）:-ms-input-placeholder（IE10–11）不过现在项目中，只写标准 ::placeholder 就够用了，打包工具或 autoprefixer 通常也不再补这些。
立即学习“前端免费学习笔记（深入）”；
它只在输入框为空且未获得焦点时显示；一旦用户点击（focus）或输入内容，就会自动隐藏。不能用 JS 直接操作 placeholder 文本，但可通过 input.placeholder = "新提示" 动态修改。
如果想“始终显示提示”，那不属于 placeholder 职责——应改用浮动标签（floating label）或外部 <label></label> + JS 控制显隐。
#ccc），建议不低于 #777，保证可读性opacity: 0.8 微调，比单纯改色更柔和font-weight: bold，语义上它是辅助信息，不是强调内容基本上就这些。用好 ::placeholder，不复杂但容易忽略细节。
以上就是css输入框未填写时显示提示文字怎么处理_用::placeholder伪元素美化提示内容的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
846
收藏
