css3如何设置placeholder的样式-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家带来的内容是介绍如何使用css3设置placeholder的样式，让大家了解placeholder是什么，如何使用，如何修改修改（设置）其样式。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来了解一下placeholder是什么？

placeholder是HTML5新增的一个属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，这个提示会在用户输入之前显示在输入框中，然后在用户输入字段后消失。【相关视频教程推荐：HTML5教程】

根据浏览器的不同，当输入字段（框）成为焦点时，该提示信息（占位符）可能会保持可见，也可能不会保持可见。例如，IE10 +将在输入聚焦时会隐藏，即使它仍为空。

适用范围：

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

兼容性：

因为是HTML5中的新增属性，所以会存在兼容性的问题。下面我们来看看浏览器的支持情况：

表格中的数字表示支持该属性的第一个浏览器版本号。

placeholder属性的基本用法，举例说明：

1 2	`用户名：<input` `type="text"` `placeholder="请输入用户名"> <br` `/>` ` 密 码：<input` `type="password"` `placeholder="请输入密码">`

效果图：

一般情况下placeholder属性会有自己默认的样式，当有时为了页面的整体美观，我们就想要自定义样式，那么如何来设置placeholder的样式？

下面我们就通过简单的代码示例来介绍使用css3设置placeholder的样式的方法。

css3设置placeholder的样式代码示例：

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者