HTML5占位符实现输入背景文本提示效果

在本文中，我们来看看输入框的文本提示效果是什么，如下所示:

这种效果现在在Internet上非常流行，但是大多数使用JavaScript来实现. 但是HTML5为我们提供了一个新的纯HTML实现，没有任何JavaScript，只需将HTML5规范中的新占位符属性添加到输入文本框的标记中，然后在属性值提示信息中输入所需的内容即可.

语法基本上是这样的: <input placeholder =“”提示信息...“>

<form>
<input type="text" placeholder="你的姓名..." name="lname">
<input type="password" placeholder="你的密码..." name="pass">
<input type="submit" value="提交">
</form>

有相应的通用方法可以美化CSS3中的占位符提示信息. 您可以设置消息文本的颜色html文本框背景颜色，透明度，背景颜色等.

为了最大化与所有浏览器的兼容性，仍然有必要在CSS中的占位符属性中添加浏览器引擎前缀.

-Google Chrome（Webkit）: ::-webkit-input-placeholder伪元素；

-IE10 :: -ms-input-placeholder伪类;

-Firefox（Gecko18-）: : -moz-placeholder伪类；

-Firefox（Gecko19 +）: ::-moz-placeholder伪元素；

-Opera（Presto）: 无.

/* WebKit browsers */
::-webkit-input-placeholder {
	color: #777;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
	color: #777;
	opacity: 1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
	color: #777;
	opacity: 1;
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
	color: #777;
}

各种浏览器对HTML5 / CSS3中新功能和属性的支持逐渐得到改善. 最终，所有浏览器将完全支持HTML5 / CSS3，这是毫无疑问的. 当前，支持HTML5占位符属性的浏览器是Google Chrome，Firefoxhtml文本框背景颜色，Safari，Opera和IE10 +.

原始来源: webhek

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-227430-1.html