将输入占位符颜色更改为更暗
Posted
技术标签:
【中文标题】将输入占位符颜色更改为更暗【英文标题】：Change input placeholder color darker 【发布时间】：2013-03-08 00:18:33 【问题描述】：关注这篇文章（Style text input placeholder），我可以将文本输入占位符的颜色更改为红色。但它始终是浅红色，而不是完全红色。
有什么办法可以让它变成红色吗？
更新
Chrome 上的颜色是红色（这是正确的），Firefox 上的颜色不是红色，它是浅红色或模糊的，我猜到了。
编辑（来自 OP 答案）：
请查看此示例 (http://jsfiddle.net/LQkQG/)，Chrome 上的颜色为红色，而 Firefox 上的颜色为light-red。
我希望 Firefox 上的颜色与 Chrome 相同。
【问题讨论】：
【参考方案1】：我发现您需要覆盖不透明度。
::-webkit-input-placeholder /* WebKit browsers */
color: red;
opacity: 1 !important;
【讨论】：
粗糙，我没有注意到 Chrome 挂在不透明度上！ 现在你唯一的改变 webkit 浏览器的颜色 ::-webkit-input-placeholder /* WebKit 浏览器 / color: #999; :-moz-placeholder / Mozilla Firefox 4 到 18 / color: #999; ::-moz-placeholder / Mozilla Firefox 19+ / 颜色：#999; :-ms-input-placeholder / Internet Explorer 10+ */ color: #999; 这个答案应该在::-moz-placeholder 中设置不透明度，因为 Firefox 是不透明度较低的浏览器。【参考方案2】：
是的，通过 HEX（十六进制）设置它的值，您可以更好地控制要使用的颜色。
鲜红色（尽可能红色）的颜色是#FF0000
然而，Firefox 是一个叛逆者，需要被告知使用什么不透明度。
参考this chart
::-webkit-input-placeholder
color: #FF0000;
opacity: 1 !important; /* for older chrome versions. may no longer apply. */
:-moz-placeholder /* Firefox 18- */
color: #FF0000;
opacity: 1 !important;
::-moz-placeholder /* Firefox 19+ */
color: #FF0000;
opacity: 1 !important;
:-ms-input-placeholder
color: #FF0000;
【讨论】：
这个答案应该在::-moz-placeholder 中设置不透明度，因为 Firefox 是不透明度较低的浏览器。【参考方案3】：
输入颜色的十六进制值。
也许使用http://www.colorpicker.com/ 之类的工具？
【讨论】：
【参考方案4】：访问：http://www.w3schools.com/html/html_colors.asp
<html>
<head>
<style type="text/css">
input, textarea color: #000;
.placeholder color: #aaa;
</style>
</head>
<body>
<form action="" method="post">
<input type="text" name="user" placeholder="enter a text" />
<input type="submit" value="submit" onclick="test()" />
</form>
您可以在颜色代码的位置写上您想要的任何颜色
【讨论】：
CSS 类选择器与 HTML 属性无关 :)以上是关于将输入占位符颜色更改为更暗的主要内容，如果未能解决你的问题，请参考以下文章
使用 JavaScript 更改焦点占位符文本的颜色 [关闭]
Firefox 23.0.1 Chrome 23.0.1271.64 和 IE 8 之间占位符的字体颜色差异