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

我试图使占位符文本看起来与输入表单字段的实际文本完全相同

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

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

以下是html代码：

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

<p>Google+ Link</p>
<input type="text" placeholder="" />

我在firefox上遇到了很多麻烦

试试这个：

HTML:

---

下面是一个包含上述代码的JSFIDLE:

一个问题是您忘记了彩色代码前面的hashtag（

#

）：

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

因为它是CSS中最低的，所以它可能覆盖了以前的样式：

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

另外，对于占位符，有相当多的CSS使其跨浏览器：

::-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

---

成功了！谢谢不透明对我来说确实是个问题。现在已经修好了。没问题：我很高兴能帮上忙！

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

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

::-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;
}