如何改变placeholder的样式

在Web开发中，placeholder 用于在输入框中展示默认提示内容，比如搜索框中的“请输入关键字”。默认情况下，placeholder 的样式和输入框的文本样式一致，如果想要将其样式修改为特殊样式，则需要对其进行单独的样式设置。

下面是一些方法：

1.使用 ::placeholder 伪元素

::placeholder 是一个伪元素，可以选择并设置 input 或 textarea 元素的 placeholder 样式：

input::placeholder {
  color: #999;
  font-size: 14px;
}

textarea::placeholder {
  color: #ccc;
  font-size: 16px;
}

上述代码会将 input 元素的 placeholder 文本颜色设置为 #999，字体大小为 14px，将 textarea 元素的 placeholder 文本颜色设置为 #ccc，字体大小为 16px。

2. 使用:-ms-input-placeholder伪元素和::-moz-placeholder伪元素

:-ms-input-placeholder 伪元素和 ::-moz-placeholder 伪元素可以分别用于设置在 IE 和 Firefox 中使用的 placeholder 样式：

/* for IE */
input:-ms-input-placeholder {
  color: #999;
  font-size: 14px;
}

/* for Firefox */
input::-moz-placeholder {
  color: #ccc;
  font-size: 16px;
}

3. 使用 :placeholder-shown 伪类

如果要针对启用的 placeholder 进行样式设置，可以使用 :placeholder-shown 伪类，它只会在占位符内容被显示时应用样式。

input[type="text"]:placeholder-shown {
  color: #999;
  font-size: 14px;
}

上述代码将只应用于在文本输入框中通常常规输入的输入占位符，一旦在文本框中存在任何内容，则该样式将不再应用于输入框。

总结

这些是改变 placeholder 样式的方法，可以根据需求选择适合的方法。 ::placeholder 伪元素和 :-ms-input-placeholder 伪元素和 ::-moz-placeholder 伪元素 可以用于对各种浏览器的 placeholder 进行样式设置。 :placeholder-shown 可以用于单独设置一个已经在使用中的 placeholder 的样式。希望这篇简短的文章能够帮助您轻松地更改 placeholder 样式。