html - 在 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;
}