将输入占位符颜色更改为更暗答案

【问题标题】：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 相同。

【问题讨论】：

标签： css input textarea placeholder

【解决方案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 属性无关 :)