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伪类,但它似乎我不应该打扰,如果我想要的是在用户开始输入时应用于输入的不同颜色。
感谢您的帮助!
这实际上是一种有意识的实施选择(和占位符的造型是一个伪类,而不是一个伪元素的原因)。这里的WebKit方法的问题在于,如果使用占位符对输入的颜色和背景进行样式设置,WebKit将应用背景颜色,但不应用颜色样式,并且占位符文本可能会很容易导致无法读取。当然你可以用占位符特定的样式解决这个问题,但人们通常会忘记。
对于Firefox,你将不得不使用自己的风格,因为这是浏览器如何呈现。还有一个迹象表明,FF正在与维护“除IE以外的所有人使用的标准”脱节。您可以轻松地做到这一点如下:
input: {
color: red;
}
input:-moz-placeholder {
color: #a1a1a1;
}
只要浏览器继续争取控制“标准”,这将继续是一个问题。 Unfortianatly,IE和FF两者都与战斗,他们得到的一切的WebKit,但是在过去的更新已经看到,FF最终可能会来到身边,为IE ....
目标应该是“每个人都使用一种标准”,而不是“每个人都使用一种标准,除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
。
你要记得哥哥HTML5是不是一个标准,因此还得到了一组奇怪的小错误。但是,如果可以的话,我不会在输入元素中通过占位符看到任何红色文本。
当前,大多数跨浏览器,可靠且面向未来的方式来设置样式占位符文本的方式是使用JavaScript删除原生placeholder
属性,并使用JS模拟相应的功能。
在你的情况下,不需要风格占位符文本本身,:focus
伪类可能应该是足够的,确实如此。
我不认为这是做这件事ELEGAN解决方案。请参阅相关http://*.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – antyrat 2012-03-15 16:18:26