html - 使占位符文本看起来像表单域中的输入文本。附上图片

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

另外，对于占位符来说，似乎有相当多的 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;
}

Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.

<子> This code and quote comes from this excellent SO answer

JSFiddle Demo