HTML | DOM 输入文本占位符属性

在HTML表单中，输入文本占位符属性（placeholder attribute）可用于在输入框中显示一个占位符文本，以便告诉用户应该在该输入框中输入什么内容。这个属性可以与 <input> 和 <textarea> 标签一起使用。

语法

<input type="text" placeholder="请输入名字">

<textarea placeholder="请输入评价"></textarea>

属性值

placeholder 属性值是一个字符串，可以包含任意文本或HTML标签。 在用户在文本框中输入内容时，该占位符文本会自动消失。

<input type="number" placeholder="请输入年龄（18岁以上）">

兼容性

placeholder 属性在 HTML5 中添加，因此只能在 HTML5 中使用。但是，几乎所有的主流浏览器都支持该属性，包括 Chrome、Firefox、Safari 和 IE9+。 对于不支持该属性的浏览器，占位符文本将不会被显示。

修改占位符样式

当占位符文本遵循文本输入框的默认样式时，它看起来与文本编写区域的文本相同，只有颜色上的区别。但是，我们可以使用 CSS 样式来改变占位符文本的颜色、字体、大小等等。

::placeholder {
  color: red;
}

请注意，占位符文本在用户输入后消失，因此任何与它相关的样式都会被移除。