设置Placeholder的颜色
不二 发布于 1490783019

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:

用法实例:

<input type="search" name="user_search"  placeholder="mulala.com" />

支持该属性的浏览器下,默认的placeholder文字颜色一般都是浅灰色。有些时候,我们可能需要自定义placeholder的文字颜色,大多数浏览器下可以用下面的代码搞定:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}

 值得一提的是,Firfox浏览器下,placeholder默认有一个opacity值,所以在火狐浏览器下placeholder文字看起来有些模糊,需要设置opacity的值让文字变的清晰一些:

::-moz-placeholder {
opacity: 1;
}

 可以在火狐下看看这个代码