论css如何修改placeholder的样式？

站长

2022年12月03日 02:11 · 阅读数 55

有没有一种让我们修改placeholder的样式的方式？答案肯定是有的，我们可以通过::placeholder来修改placeholder的样式。

先来让我们认识一下::placeholder，它是一个伪元素，它的作用是用来选择placeholder的，我们可以通过它来修改placeholder的样式，如下所示：

input::placeholder {
  color: red;
}

这样我们就可以修改placeholder的颜色了。

1. 伪元素`::placeholder`

::placeholder是一个伪元素，参考MDN的介绍，它的作用是用来选择placeholder的，我们可以通过它来修改placeholder的样式，如下所示：

伪元素有一个特点，就是并不是所有的dom元素都支持，部分伪元素只有指定的dom元素才支持，比如::placeholder只有input和textarea才支持，其他的dom元素是不支持的。

::placeholder的兼容性如下所示：

更多的兼容性可以参考caniuse。

对于IE和Android Browser来说，它们都不支持::placeholder，但是我们可以通过私有前缀来实现，如下所示：

input:-ms-input-placeholder {
  color: red;
}

input::-webkit-input-placeholder {
  color: red;
}

input::-moz-placeholder {
  color: red;
}

这样我们就可以实现IE和Android Browser的兼容了。

注意私有前缀的顺序，::-webkit-input-placeholder要放在::-moz-placeholder前面，否则Firefox会失效。

现在有一个需求，就是当input的状态为disabled的时候，我们不需要显示placeholder，这个时候我们可以通过::placeholder来实现，如下所示：

<input type="text" placeholder="请输入内容" disabled />

input::placeholder {
  color: red;
}

input:disabled::placeholder {
  color: transparent;
}

这样我们就可以实现当input的状态为disabled的时候，不显示placeholder了。

这里又多了一个伪类disabled的小知识点，它的作用是用来选择disabled状态的input的，我们可以通过它来修改disabled状态的input的样式，如下所示：

input:disabled {
  color: red;
}

本文主要介绍了::placeholder的使用，它是一个伪元素，它的作用是用来选择input和textarea的placeholder的，具体的使用场景还是根据实际的需求来定。