龙空技术网

通过css3设置html5 placeholder字体样式

切图网本网 917

前言:

现在小伙伴们对“css更改字体样式”大约比较重视,朋友们都需要分析一些“css更改字体样式”的相关知识。那么小编也在网摘上网罗了一些有关“css更改字体样式””的相关知识,希望小伙伴们能喜欢,大家一起来学习一下吧!

关注本头条号,专注做前端。

依然记得在html5推行出来之前,做网页前端的日子,还需要JS来写才能实现placeholder效果,自从htm5出来以后,这个工作的内容双手就基本被解放了

我们只知道placeholder的字体颜色会比输入字体颜色淡一点,但是,如何去设置一个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; }

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

//

无实战,不前端——切图学院

报名地址:

标签: #css更改字体样式