input的placeholder美化

最新推荐文章于 2024-04-18 15:39:08 发布

转载最新推荐文章于 2024-04-18 15:39:08 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qieban/p/7073953.html

本文介绍如何使用CSS3来美化HTML5输入框的placeholder属性，通过添加颜色、背景和其他样式，使得输入框的提示信息更加醒目和美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总所周知html5为input提供了 placeholder的属性，它现在在我们做项目中已经不可或缺，但是input（文本框）里的背景文字都是灰色的，样式很单一，其实它们可以做的更好看，CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。通过下面代码实现

/* 通用 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
 
/* webkit专用 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
 
/* mozilla专用 */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

　　其实只是一句代码，但为了实现范围最广的浏览器支持，加上了各自的浏览器引擎前缀(Vendor Prefix)，一下子变成了10几行代码，希望这种情况会尽快的过去。

转载于:https://www.cnblogs.com/qieban/p/7073953.html