在CSS中为单击的占位符设置样式

Question

在设置占位符样式时，我们使用:: - webkit-input-placeholder，但是如果我们想要设置单击输入文本字段的占位符呢？ 例如，http://www.bbc.com/news/uk 网站右上角搜索框的占位符颜色为深灰色，但在搜索框中单击时，颜色变为浅灰色。我能知道这是怎么做到的吗？

Answer 1

您可以使用:focus和::-webkit-input-placeholder来实现此目的。这是工作demo

<强> HTML

<input type="text" placeholder="My Placeholder" id="myInput">

<强> CSS

#myInput:focus::-webkit-input-placeholder { 
     color: red;
}