CSS - 改变 input 输入框 placeholder 的字体颜色大小

在网页开发中，我们经常需要改变输入框（input）的样式来增强用户体验。其中，placeholder 是在输入框中显示的提示文本，通常用于向用户指示输入的内容。虽然浏览器默认提供了一些样式，但我们可以通过 CSS 来自定义 placeholder 的字体颜色和大小，使其更加突出和美观。

方法一：使用 ::placeholder 伪类选择器

在 CSS3 中，我们可以使用 ::placeholder 伪类选择器来选择输入框中的 placeholder，并对其应用样式。以下是改变 placeholder 字体颜色和大小的基本代码：

/* 改变字体颜色 */
input::placeholder {
  color: #999999;
}

/* 改变字体大小 */
input::placeholder {
  font-size: 14px;
}

你可以根据需要调整颜色和大小的数值。这种方法非常简单且兼容性较好，但有些低版本浏览器可能不支持。

另一种方法是给输入框添加一个自定义的类，并在 CSS 中通过类选择器来设置 placeholder 的样式。以下是示例代码：

HTML:

<input type="text" class="custom-input" placeholder="请输入内容">

CSS:

.custom-input::placeholder {
  color: #999999;
  font-size: 14px;
}

通过给输入框添加一个类，我们可以针对特定的输入框进行样式定制，使代码更灵活和可维护。

如果你想一次性修改所有的输入框的 placeholder 样式，你可以使用全局选择器来选择所有的输入框，并应用相同的样式。

HTML:

<input type="text" placeholder="请输入内容">
<input type="password" placeholder="请输入密码">
<input type="email" placeholder="请输入邮箱">

CSS:

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder {
  color: #999999;
  font-size: 14px;
}

使用属性选择器可以灵活选择不同类型的输入框，这样你就可以一次性地设置所有输入框的 placeholder 样式。

通过以上几种方法，我们可以改变输入框的 placeholder 字体颜色和大小，来提升用户体验和页面美观度。根据实际需求，你可以选择适合的方法应用到你的网页开发中。

以上所述只是众多方法中的几种，你也可以根据实际需要使用其他方法。希望本篇博客能对你理解和使用 CSS 改变 input 输入框 placeholder 的字体颜色和大小有所帮助。