更改占位符颜色

---

了解如何使用 CSS 更改占位符属性的颜色。

---

占位符颜色

亲自试一试 »

---

步骤 1) 添加 HTML:

使用输入元素并添加占位符属性:

实例

<input type="text" placeholder="A red placeholder text..">

步骤 2) 添加 CSS:

在大多数浏览器中，占位符文本是灰色的。 要更改这一点，请使用非标准的 ::placeholder 选择器设置占位符的样式。 请注意，Firefox 为占位符添加了较低的不透明度，因此我们使用 opacity: 1 来解决此问题。

实例

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
} 亲自试一试 »

提示:在我们的 CSS 参考中了解更多关于 ::placeholder 选择器的信息:CSS ::placeholder 属性。