Question

我很惊讶这在Firefox中不起作用（在Chrome和Firefox上试用：http://jsfiddle.net/YzkSx/）：

<!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伪类，但是如果我想要的是当用户开始输入时应用于输入的不同颜色，我似乎不必费心。

感谢您的帮助！

Answer 1

这实际上是一种有意识的实现选择（以及占位符样式是伪类而不是伪元素的原因）。这里使用WebKit方法的问题是，如果使用占位符为输入设置颜色和背景的样式，WebKit将应用背景颜色而不是颜色样式，占位符文本很容易变得不可读。当然，您可以使用占位符特定的样式解决这个问题，但人们通常会忘记。

Answer 2

对于firefox，你必须使用它们的样式，因为这是浏览器呈现的方式。还有一个迹象表明，FF正在保持“除了IE使用的每个人的标准”之外就会失去联系。您可以按照以下方式轻松完成：

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

只要浏览器继续争取对“标准”的控制，这将继续成为一个问题。不幸的是，IE和FF都在用他们得到的所有东西来对抗webkit，但正如在过去的更新中看到的那样，FF最终可能会出现，就像IE一样....

Answer 3

也许你可以用

实现几乎相同的效果

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

不使用-moz-placeholder。

Answer 4

你必须记住兄弟HTML5不是标准版，所以你会得到一堆奇怪的小错误。但是，如果可以的话，我没有通过输入元素中的占位符看到任何红色文本。

Answer 5

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

如果你不需要设置占位符文本本身，那么:focus伪类可能就足够了。

Firefox占位符颜色更改

5 个答案: