CSS设置input placeholder文本的样式[转载]

« 2020年02月 »

KBdancer 发表于 2015-01-09, 3:25 PM. 发表在：前端技术

placeholder是HTML5 input的新属性，英文意思是占位符，它一般表示input输入框的默认提示值。
当然我们今天讨论的不是placeholder这个属性，而是设置placeholder的文本样式的选择器。

火狐和webkit核心浏览器的属性名字不一样，谁叫不是一个娘生的呢。

/* webkit 浏览器*/
#field1::-webkit-input-placeholder { color:#00f; }
#field2::-webkit-input-placeholder {
	color:#090;
	background:lightgreen;
	text-transform:uppercase;
}
#field3::-webkit-input-placeholder {
	font-style:italic;
	text-decoration:overline;
	letter-spacing:3px;
	color:#999;
}
/* 火狐浏览器 */
#field1::-moz-placeholder { color:#00f; }
#field2::-moz-placeholder {
	color:#090;
	background:lightgreen;
	text-transform:uppercase;
}
#field3::-moz-placeholder {
	font-style:italic;
	text-decoration:overline;
	letter-spacing:3px;
	color:#999;
}

当然，和CSS设置::selection选中文本样式一样，你只能设置几个和文本有关系的CSS样式：Color, font-style, font-varian, background, text-decoration
PS：IE从IE 10才开始支持placeholder属性，伪选择器名字还不得而知，估计是加前缀-ms-了

本文链接：https://www.92ez.com/?action=show&id=19
!!! 转载请先联系non3gov@gmail.com授权并在显著位置注明作者和原文链接 !!! 小黑屋
提示：技术文章有一定的时效性，请先确认是否适用你当前的系统环境。

访客评论

目前还没有人评论，您发表点看法？

发表评论