占位符焦点不起作用

Question

占位符颜色为红色。默认文本字段值为＃444。我想要的，如果我单击文本字段，占位符颜色将更改。但不应更改默认颜色。有可能吗？

请看我的小提琴。

http://jsfiddle.net/ca35A/

CSS:
.add_product input[type=text]{ color:#444;}

::-webkit-input-placeholder {
   color: #D72D2E;
}

:-moz-placeholder { /* Firefox 18- */
   color: #D72D2E;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #D72D2E;  
}

:-ms-input-placeholder {  
   color: #D72D2E;  
}




::-webkit-input-placeholder:focus {
   color: #F3797A;
}

:-moz-placeholder:focus { /* Firefox 18- */
   color: #F3797A;  
}

::-moz-placeholder:focus {  /* Firefox 19+ */
   color: #F3797A;  
}

:-ms-input-placeholder:focus {  
   color: #F3797A;  
}

Answer 1

在:focus之前移动::placeholder：

:focus::-webkit-input-placeholder //etc

http://jsfiddle.net/ca35A/1/

Answer 2

您在:focus上设置placeholder，但它应位于input：

:focus::-webkit-input-placeholder {
    color: #F3797A;
}

:focus:-moz-placeholder { /* Firefox 18- */
    color: #F3797A;
}

:focus::-moz-placeholder {  /* Firefox 19+ */
    color: #F3797A;
}

:focus:-ms-input-placeholder {
    color: #F3797A;
}

Fiddle

请注意，并非所有浏览器都支持此功能。例如，当您专注于placeholder时，IE会隐藏input。