如何解决跨浏览器的占位符 CSS 差异？答案

【问题标题】：How to solve placeholder CSS difference across different browsers?如何解决跨浏览器的占位符 CSS 差异？
【发布时间】：2012-07-05 06:10:34
【问题描述】：

我正在使用 Twitter 引导 CSS。您可以在下面看到相同的代码在 FireFox 和 Chrome 中的显示方式不同。

这很奇怪。 Firebug 告诉我占位符的 css 设置为浅灰色：

:-moz-placeholder {
    color: #999999;
}

这应该会影响所有元素中的所有占位符，因为它在 Chrome 中正确完成。但是在 Firefox 中，为什么 textareas 正确应用，而 input 不是？我该如何解决这个问题？

<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?">

<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea>

铬：

火狐：

更新：

下面的cmets给了我一个想法：

Input 与 textarea 不同的是，color: #9999 条目被划掉，这意味着某些东西正在覆盖它。

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

其实就是这个color: #555555;。当我在萤火虫中禁用它时，一切正常。为什么 Chrome 不关心这个而 Firefox 关心？任何提示如何在两个浏览器中解决此问题？我还是 CSS 新手。

【问题讨论】：

这里对我有用 - jsfiddle.net/WHTmC 但您可能想尝试像这样定义规则 input:-moz-placeholder
@ZoltanToth 也适合我。
太奇怪了。我可以看到您的代码在线工作。但在本地却没有。这可能是这样吗？相同的本地代码在两个浏览器上不同...
您可能在该输入字段上有一个优先级更高的 CSS 规则，例如 #formName input { color: #000 }
有道理，但它不应该也影响 Chrome 吗？ :)

标签： css twitter-bootstrap placeholder

【解决方案1】：

问题是 Firefox 改变了字段的不透明度，并且你认为它是不同的颜色，但它不是......添加“不透明度：1;”它在所有浏览器中的工作方式完全相同

input:-moz-placeholder {
    color: #999999;
    opacity: 1;
}

input::-moz-placeholder {
    color: #999999;
    opacity: 1;
}

【讨论】：

走了大约 1m 才发现差异，非常微妙。

【解决方案2】：

由于这个奇怪的伪元素，我前段时间做了一点小事，结果？您不能在选择器之间添加逗号，您必须指定您的规则两次，这太可惜了。

HTML：

<input type="text" id="test-webkit" placeholder="test-webkit" /><br />
<input type="text" id="test-moz" placeholder="test-moz" /><br />
<input type="text" id="test-both" placeholder="test-both" /><br />
<input type="text" class="test-both" placeholder="test-both-separately" />

CSS：

/* Works on Webkit */
#test-webkit::-webkit-input-placeholder {
    color: red;
}

/* Works on Firefox */    
#test-moz:-moz-placeholder {
    color: red;
}

/* Don't work */
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder {
    color: red;
}

/* Works on both */
.test-both::-webkit-input-placeholder {
    color: red;
}
.test-both:-moz-placeholder {
    color: red;
}

The Fiddle.

【讨论】：

有趣。我能看出区别。谢谢你。将此解决方案应用于所有占位符似乎很困难。我试图在没有.test-both:: 的情况下粘贴最后两行，但color: #555555; 仍然会覆盖它。我最终故意覆盖它以在两个浏览器中修复它，如下所示：input[type="text"] { color: #999999;}。不确定这是否是最好的方法。
在 Firefox 19 下我必须使用.test-both::-moz-placeholder 而不是.test-both:-moz-placeholder（注意两个冒号而不是一个冒号）。
您必须多次指定问题，因为浏览器会将规则解释为一个。在 Firefox 中找不到像 -webkit 这样的属性。因此，整行都呈现为错误。

【解决方案3】：

作为您需要使用的占位符完整列表下方的更新。 :-moz 在较新的 firefox 版本中已弃用。

您需要多次指定规则，并且不能将它们组合在一行中。这是因为浏览器会将它们解释为单个选择器。会报错，因为 Firefox 不知道 webkit 规则。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color:#bbb;
  font-family: 12px Verdana, Arial,Tahoma, sans-serif;
  font: normal;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}

【讨论】：

【解决方案4】：

清除您的 Firefox 缓存（可能就足够了）。

并用萤火虫检查

如果尚未完成，请安装 firebug https://addons.mozilla.org/en-US/firefox/addon/firebug/

右键单击输入，然后单击 Inspect Element with Firebug。

查看是否有更高优先级的 css 属性。

【讨论】：