占位符焦点不起作用答案

【问题标题】：placeholder focus not working占位符焦点不起作用
【发布时间】：2014-07-24 20:13:59
【问题描述】：

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

请看我的小提琴。

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

【问题讨论】：

占位符颜色应该改变吗？但是，当您关注该字段时，占位符会消失。:focus 位于 input 而不是 placeholder。
@putvande 实际上不是：只有当你开始输入时它才会消失......
这取决于浏览器。在 IE 中它消失了。

标签： html css

【解决方案1】：

将:focus 移到::placeholder 之前：

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

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

【讨论】：

聚焦输入字段时看起来像是在更改占位符。不是吗？
是的，它的意思是“元素中具有伪类:focus的占位符”，而不是原始代码中的“聚焦的占位符”。

【解决方案2】：

您在placeholder 上设置了:focus，但它应该在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

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

【讨论】：