使占位符文本看起来像表单字段中的输入文本.图像附加

Question

我试图使占位符文本看起来完全像是要输入的实际文本。

第一个字段显示占位符文本。看起来像灰色文字。

第二个字段显示输入的文本中。看起来更黑。

这是HTML代码：

<p>Twitter Link</p>
<input type="text" placeholder="http://twitter.com" />
<p>Google+ Link</p>
<input type="text" placeholder="" />

和CSS代码：

::-webkit-input-placeholder {color: #000;}
:-moz-input-placeholder     {color: #000;}
::-moz-input-placeholder    {color: #000;}
input::-moz-placeholder     {color: 000;}

我主要在Firefox上遇到困难。

Answer 1

一个问题是您忘记了标签（ #）在颜色码前面：

input::-moz-placeholder 
{color: 000;}

由于它是CSS中最低的，因此它可能会覆盖以前的样式：

input::-moz-placeholder 
{color: #000;}

另外，对于占位持有人来说，有很多CS可以使其交叉浏览器：

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #000;
}

请小心避免对比不良。Firefox的占位符似乎默认情况下的不透明度降低，因此需要使用不透明度：1此处。

_{此代码和报价来自这个出色的答案}

JSFIDDLE DEMO

Answer 2

尝试以下：

html：

<input type="text" placeholder="http://twitter.com" />

CSS：

input::-webkit-input-placeholder {
    color: #000;
}

这是带有上述代码的JSFIDDLE：https：//jsfiddle.net/e0d8my79/49/