html - 当我的输入未展开时给出一种颜色，当它展开时给出其他颜色

Question

我有一个表单，当我点击我的输入时，输入会展开。

我想在输入未展开时给出颜色#000，在输入展开时给出颜色#fff。

我认为我这样做是正确的，但它不起作用:为什么？

Fiddle

<form id="search">
  <input name="q" type="text" size="40" placeholder="Pesquisar..." />
</form>

我的 CSS:

#search input[type="text"] 
{
    border: 0 none;
    text-indent: 0;
    background:green;
    width:80px;
    margin-top: 11px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    color:#000;

}

#search input[type="text"]:focus 
{
    background: #141d22;
    width: 110px;
    outline:none;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    color:#fff;
}

Answer 1

使用 ::input-placeholder 伪类。每个浏览器都需要特定的供应商前缀。

Updated Example - 请参阅其他前缀选择器的示例。

#search input[type="text"]:focus::-webkit-input-placeholder {
    color:#fff;
}
#search input[type="text"]::-webkit-input-placeholder {
    color:#000;
}