css3中文本占位符

什么是CSS3中文本占位符？

CSS3中提供了一种方便的方式来为表单中的输入框添加占位符文本。这些文本被称为“占位符”或“水印”，在输入框中灰色的文本告诉用户该输入框的作用，以帮助用户填写内容。

如何使用CSS3中的文本占位符?

添加一个占位符文本只需要以下几个CSS属性：placeholder，color，text-align。在输入框中添加 placeholder 属性和 color 属性即可添加占位符文本。text-align 属性用于设置文本的对齐方式。

在上面的示例中，“请输入用户名”即为占位符文本。

如何自定义CSS3中的占位符文本样式？

CSS3中提供了一些属性来自定义占位符文本样式，如font-size、font-family、font-weight等。可以通过以下方式进行自定义：

::placeholder { /*自定义占位符样式*/
  color: #999;
  font-size: 14px;
  font-family: Arial, sans-serif;
  font-weight: 400;
}

在上面的示例中，通过 pseudo 元素 ::placeholder 来自定义占位符文本样式。其中 color 属性定义占位符文本颜色，font-size 属性定义占位符文本字体大小，font-family 属性定义占位符文本字体，font-weight 属性定义占位符文本字体重量。

浏览器兼容性问题

需要注意的是，某些旧版浏览器（如IE9及以下版本）可能不支持CSS3中的占位符文本。在这种情况下，可能需要使用JavaScript polyfill来手动实现这个特性，以确保兼容性。