::placeholder伪元素用于自定义输入框占位符样式,支持color、font-size等属性,可针对不同输入框设置,并建议添加厂商前缀以兼容旧版浏览器。

在CSS中,::placeholder 伪元素用于设置输入框(input、textarea)中占位符文本(即 placeholder 属性显示的提示文字)的样式。这个伪元素让你可以自定义提示文字的颜色、字体、大小等外观属性。
上面的代码会将所有 input 元素的提示文字颜色设为灰色,字体变小并倾斜。
::placeholder 支持以下常用CSS属性:
你可以针对特定类型的输入框设置不同的提示样式:
立即学习“前端免费学习笔记(深入)”;
input[type="text"]::placeholder {textarea::placeholder {
color: #666;
font-size: 12px;
}
现代浏览器普遍支持 ::placeholder,但为了更好的兼容性,尤其是旧版 WebKit 浏览器(如 Safari 和旧版 Chrome),建议加上厂商前缀:
input::-webkit-input-placeholder { /* Safari, Chrome */input::-moz-placeholder { / Firefox 19+ /
color: #999;
}
input:-moz-placeholder { / Firefox 18- /
color: #999;
}
input:-ms-input-placeholder { / IE 10+ /
color: #999;
}
input::placeholder {
color: #999;
}
现在大多数情况下只需使用标准的 ::placeholder 即可,但如果需要支持较老版本浏览器,加上前缀更稳妥。
基本上就这些,合理使用 ::placeholder 能提升表单的视觉体验和用户友好度。
以上就是在css中::placeholder输入框提示样式的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号