如何解决不同浏览器的占位符CSS差异？

Question

我正在使用Twitter bootstrap 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>

铬:

火狐:

更新:

以下评论给了我一个想法:

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;.当我在firebug中禁用它时,一切正常.Chrome怎么没关心这个,但Firefox呢？有关如何在两种浏览器中修复此问题的任 我还是css的新手.

Answer 1

问题是Firefox改变了字段的不透明度,并且你认为它有不同的颜色,但它不是......添加"不透明度:1;" 它将在所有浏览器中完全相同

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

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

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

小提琴.