placeholder的颜色怎么改(用css3设置placeholder的颜色方法)

placeholder的颜色怎么改?依然记得在html5推行出来之前,做网页前端的日子,还需要JS来写才能实现placeholder效果,自从htm5出来以后,可以用css3设置placeholder的颜色方法,这个工作的内容双手就基本被解放了。

我们只知道placeholder的字体颜色会比输入字体颜色淡一点,但是,如何去设置一个placeholder的颜色呢? 通过用css3设置placeholder颜色的方法,实例代码如下

/* 通用 */
::-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; }

考虑兼容性,要写很多个版本,相信在将来更规范以后,这个问题会得到解决。

版权声明:
作者:Joker 链接:https://456787.xyz/archives/4947
文章版权归作者所有,转载请注明出处。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>