Firefox的占位符颜色改变

我感到惊讶的是这并没有在Firefox（试试Chrome和Firefox：http://jsfiddle.net/YzkSx/）：工作Firefox的占位符颜色改变

<!doctype html> 
<html> 
<head> 
    <title>Placeholder demo</title> 
    <style type="text/css"> 
     input {color: red} 
    </style> 
</head> 
<body> 
    <input id="test" placeholder="Placeholder text!"> 
</body> 
</html>

因为我申请一个红色的输入，占位符结束也是红色的。在Chrome和Safari中，如果我为输入“着色”，则占位符不受影响。

我知道关于：moz-placeholder伪类，但它似乎我不应该打扰，如果我想要的是在用户开始输入时应用于输入的不同颜色。

感谢您的帮助！

来源

2012-03-15 djibouti33

我不认为这是做这件事ELEGAN解决方案。请参阅相关http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – antyrat 2012-03-15 16:18:26

这实际上是一种有意识的实施选择（和占位符的造型是一个伪类，而不是一个伪元素的原因）。这里的WebKit方法的问题在于，如果使用占位符对输入的颜色和背景进行样式设置，WebKit将应用背景颜色，但不应用颜色样式，并且占位符文本可能会很容易导致无法读取。当然你可以用占位符特定的样式解决这个问题，但人们通常会忘记。

来源

2012-03-15 17:53:23

对于Firefox，你将不得不使用自己的风格，因为这是浏览器如何呈现。还有一个迹象表明，FF正在与维护“除IE以外的所有人使用的标准”脱节。您可以轻松地做到这一点如下：

input: { 
    color: red; 
} 
input:-moz-placeholder { 
    color: #a1a1a1; 
}

只要浏览器继续争取控制“标准”，这将继续是一个问题。 Unfortianatly，IE和FF两者都与战斗，他们得到的一切的WebKit，但是在过去的更新已经看到，FF最终可能会来到身边，为IE ....

来源

2012-03-15 16:18:14 SpYk3HH

目标应该是“每个人都使用一种标准”，而不是“每个人都使用一种标准，除IE使用另一个“。目标应该倾向于“标准是有意义的”，不一定“标准是任何人先发货”。在这种情况下，WebKit正在做一些有严重缺点的事情（他们还没有提出标准化）。 Mozilla正在做一些具有不同缺点的东西（同样不提出标准化）。一旦人们弄清楚如何做到这一点，它应该得到标准化。 – 2012-03-15 17:55:15

...哈哈...嘲讽是不在线了解的人说你做了什么，而不被讽刺了大量 – SpYk3HH 2012-03-15 18:11:01

.... – 2012-03-15 19:00:04

也许可以实现几乎同样的效果与

input { color: ... } 
input:focus { color: ... }

没有使用-moz-placeholder。

来源

2012-03-15 16:18:35 fcalderan

你要记得哥哥HTML5是不是一个标准，因此还得到了一组奇怪的小错误。但是，如果可以的话，我不会在输入元素中通过占位符看到任何红色文本。

来源

2012-03-15 16:18:43

当前，大多数跨浏览器，可靠且面向未来的方式来设置样式占位符文本的方式是使用JavaScript删除原生placeholder属性，并使用JS模拟相应的功能。

在你的情况下，不需要风格占位符文本本身，:focus伪类可能应该是足够的，确实如此。

来源

2012-03-15 16:26:41

Firefox的占位符颜色改变

回答

相关问题