placeholder兼容性问题

最新推荐文章于 2019-04-17 18:09:55 发布

可乐6666

最新推荐文章于 2019-04-17 18:09:55 发布

阅读量493

点赞数

分类专栏： HTML CSS 文章标签： placeholder html5

本文链接：https://blog.csdn.net/xuexizhe88/article/details/79278507

版权

HTML 同时被 2 个专栏收录

13 篇文章 2 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

1、输入框提示信息在placeholder为普遍应用之前，普遍采用使用JavaScript来实现输入框提示。HTML5提供了placeholder来帮助实现提示，不需要任何的JavaScript。只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。如下所示：

<input placeholder=”提示信息...”>

2、可以通过CSS3来美化placeholder提示信息的样式。但是placeholder存在浏览器兼容，为了更大兼容浏览器，采用如下方式

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