CSS 输入框中的背景文本

在本文中，我们将介绍如何使用 CSS 来在输入框（input type=”text”）中添加背景文本，以及如何通过样式修改其外观。

阅读更多：CSS 教程

什么是背景文本？

背景文本是在输入框中显示的灰色文本，在用户点击输入框并开始输入时会消失。它通常用于提供输入框的示例或提示，帮助用户了解应该在输入框中输入什么内容。

使用 placeholder 属性

HTML5 引入了 placeholder 属性，可以通过它来设置输入框的背景文本。该属性的值即为要显示的背景文本内容。

<input type="text" placeholder="请输入您的用户名">

上面的代码会在输入框中显示一个灰色的文本“请输入您的用户名”。当用户点击输入框并开始输入时，文本会自动消失。

使用 CSS 修改背景文本样式

我们可以使用 CSS 来修改背景文本的样式，包括颜色、字体、字号、字重等。

input::placeholder {
  color: red;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

上面的代码会将输入框中的背景文本颜色设置为红色，字体设置为 Arial，字号设置为 14 像素，字重设置为粗体。

修改背景文本的透明度

有时候我们希望背景文本的透明度比较低，以使用户更容易注意到输入的内容。我们可以使用 CSS3 的 ::placeholder 伪元素来实现这个效果。

input::placeholder {
  opacity: 0.5;
}

上面的代码会将输入框中的背景文本透明度设置为 50%。

在不支持 placeholder 属性的浏览器中使用 JavaScript

如果需要在不支持 placeholder 属性的浏览器中实现背景文本效果，我们可以使用 JavaScript 来模拟该功能。

<input type="text" id="username" value="" onfocus="if(this.value=='请输入您的用户名') this.value='';" onblur="if(this.value=='') this.value='请输入您的用户名';">

上面的代码通过 JavaScript 在输入框获取焦点时将值设置为空字符串，失去焦点时检查是否为空，如果为空则重新设置为背景文本。

总结

在本文中，我们介绍了如何使用 CSS 来在输入框中添加背景文本，并且通过样式修改其外观。使用 placeholder 属性是最简单方便的方法，但在不支持该属性的浏览器中可以使用 JavaScript 来模拟该功能。通过修改背景文本的颜色、字体、字号、字重以及透明度等样式，我们可以定制输入框的背景文本，从而提升用户体验。