HTML5中怎么修改placeholder的默认样式
小编给大家分享一下HTML5 中怎么修改placeholder的默认样式,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
公司专注于为企业提供成都做网站、成都网站制作、成都外贸网站建设、微信公众号开发、电子商务商城网站建设,微信小程序定制开发,软件按需设计等一站式互联网企业服务。凭借多年丰富的经验,我们会仔细了解各客户的需求而做出多方面的分析、设计、整合,为客户设计出具风格及创意性的商业解决方案,创新互联建站更提供一系列网站制作和网站推广的服务。
placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示,一旦用户输入信息该提示就会自动消失。比如:我们在登录时需要输入用户名和密码,它会提示你什么地方输入用户名,什么地方输入密码,这个就是使用的placeholder属性。
注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。
一、placeholder属性怎么用
语法: placeholder="你想要提示的内容"
可以直接在需要提示的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部分:
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的默认样式有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文题目:HTML5中怎么修改placeholder的默认样式
网站地址:http://scyanting.com/article/iicggc.html