图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式
导读：placeholder是HTML5中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么...
placeholder是HTML5中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的placeholder属性。
注意：placeholder属性适用于下面的input类型：text、search、url、tel、email和password。
一、placeholder属性怎么用
语法：placeholder="你想要提示的内容"
可以直接在需要提示的input输入框中加上placeholder属性，比如：
效果图：
placeholder1.jpg
如图所示，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部分：
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;
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式
本文地址： https://pptw.com/jishu/664563.html