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

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

Styling the clicked placeholder in CSS

html

css

placeholder