如何改变占位符的颜色

学习如何使用 CSS 改变占位符属性的颜色。

亲自试一试

如何改变占位符的颜色

第一步 - 添加 HTML:

使用输入元素并添加 placeholder 属性:

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

第二步 - 添加 CSS:

在大多数浏览器中,占位符文本是灰色的。要更改此设置,请使用 ::placeholder 选择器设置占位符的样式。

请注意,Firefox 为占位符添加了较低的不透明度,因此我们使用 opacity: 1 来解决这个问题。

::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: red;
}

亲自试一试

相关页面

参考手册:CSS ::placeholder 选择器