HTML5 中怎么修改placeholder的默认样式

小编给大家分享一下HTML5 中怎么修改placeholder的默认样式，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的placeholder属性。

注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

一、placeholder属性怎么用

语法： placeholder="你想要提示的内容"

可以直接在需要提示的input输入框中加上placeholder属性，比如：<input type="text" name="name" placeholder="请输入用户吗">

<input type="text" id="input" placeholder="请输入用户名" />

效果图：

如图所示，input输入框里面提示用户输入用户名

二、placeholder属性修改

当placeholder属性默认的颜色，样式等不能满足我们的需要时，需要修改它的样式。

写法：input::-webkit-input-placeholder{你想要修改的样式}

因为placeholder是 HTML5 中新增加的属性，需要注意浏览器的兼容性。

::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */

:-moz-placeholder{}                  /* Firefox版本4-18 */

::-moz-placeholder{}                  /* Firefox版本19+ */

:-ms-input-placeholder{}           /* IE浏览器 */

举例：修改placeholder样式，将input提示框中文字的颜色设为红色，字体设为20px，让文字在输入框中水平居中显示。代码如下

HTML部分：

<input type="text" id="input" placeholder="请输入用户名" />

CSS部分：

input{width: 200px;height: 40px;}
#input::-webkit-input-placeholder {
	 color: red;
	 font-size: 20px;
	 text-align: center;
	}
#input:-moz-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}
#input:-ms-input-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}

效果图：

看完了这篇文章，相信你对HTML5 中怎么修改placeholder的默认样式有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！