input的placeholder美化

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input的placeholder美化相关的知识,希望对你有一定的参考价值。

总所周知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几行代码,希望这种情况会尽快的过去。

以上是关于input的placeholder美化的主要内容,如果未能解决你的问题,请参考以下文章

css input[type=file] 样式美化,input上传按钮美化

设置input标签的placeholder的样式

placeholder属性样式设置

如何修改placeholder样式

input placeholder兼容ie10以下

小程序---- input获得焦点时placeholder重影BUG