如何解决不同浏览器的占位符 CSS 差异？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11334162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to solve placeholder CSS difference across different browsers?
提问by Houman
I am using Twitter bootstrap CSS. Below you can see how the same code is displayed differently with FireFox and Chrome.
我正在使用 Twitter 引导 CSS。您可以在下面看到相同的代码在 FireFox 和 Chrome 中的显示方式不同。
This is quite strange. Firebug tells me that the placeholder's css is set like this to light grey:
这很奇怪。Firebug 告诉我占位符的 css 设置为浅灰色：
:-moz-placeholder {
color: #999999;
}
This should affect all placeholders within all elements as its correctly done in Chrome.
But in Firefox why are textareascorrectly applied, but inputis not? How can I fix this?
这应该会影响所有元素中的所有占位符，因为它在 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>
Chrome:
铬合金：
Firefox:
火狐：
update:
更新：
The comments below gave me an idea:
下面的评论给了我一个想法：
Inputhas unlike textareathe color: #9999entry crossed out, which means something is overriding it.
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;
}
It is in fact this color: #555555;. When I disable it in firebug, it all works. How comes Chrome doesn't care about this but Firefox do? Any tips how fix this across both browsers? I am still new to css.
其实就是这个color: #555555;。当我在萤火虫中禁用它时，一切正常。为什么 Chrome 不关心这个，而 Firefox 呢？任何提示如何在两个浏览器中解决这个问题？我还是 css 新手。
采纳答案by Calvein
I've made a little fiddle a while ago because of this weird pseudo-element, the result ? You can't add a coma between the selector, you have to specify your rule twice, that's a shame.
由于这个奇怪的伪元素，我刚才做了一点小提琴，结果？你不能在选择器之间添加一个逗号，你必须两次指定你的规则，这是一种耻辱。
The HTML:
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" />?
The CSS:
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;
}?
小提琴。
回答by Vinícius Moraes
The problem is that Firefox change the opacity of the field, and with that you think its a different color, but its not... add "opacity:1;" and it will work exactly the same in all browsers
问题是 Firefox 更改了字段的不透明度，因此您认为它的颜色不同，但它不是......添加“opacity:1;” 它将在所有浏览器中完全相同
input:-moz-placeholder {
color: #999999;
opacity: 1;
}
input::-moz-placeholder {
color: #999999;
opacity: 1;
}
回答by Hendrik
As an update below a full list of placeholders you need to use. :-moz is deprecated in newer firefox versions.
作为您需要使用的占位符的完整列表下方的更新。:-moz 在较新的 Firefox 版本中已弃用。
You need to specify the rules several times and can not combine them on a single line. This is due to the fact that the browser will interpret them as a single selector. It will cause an error because Firefox does not know the webkit rule.
您需要多次指定规则，并且不能将它们组合在一行中。这是因为浏览器会将它们解释为单个选择器。会报错，因为 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;
}
回答by baptme
Clear your firefox cache (it may be enough).
清除您的 Firefox 缓存（这可能就足够了）。
and inspect with firebug
并用萤火虫检查
install firebug if it's not allready done https://addons.mozilla.org/en-US/firefox/addon/firebug/
如果尚未完成，请安装 firebug https://addons.mozilla.org/en-US/firefox/addon/firebug/
right click on the input, and click on Inspect Element with Firebug.
右键单击输入，然后单击 Inspect Element with Firebug。
to see if there's a css property with an higher priority.
查看是否有更高优先级的 css 属性。
