moz-placeholder在Firefox中不起作用 [英] moz-placeholder does not work in Firefox

问题描述

请参阅下面的代码，占位符的CSS在Firefox（最新版本）中不起作用，但它适用于Chrome。如何解决它的Firefox？

字段有多种输入颜色，但是占位符只有一种颜色，因此我不想在moz-placeholder属性中指定任何类名，

 < div class =row> 
< input type =textplaceholder =some text asdfvalue =/> 
< / div> 
  

CSS：

  ::  -  webkit-input-placeholder {color：red; } 
 ::  -  moz-placeholder {color：red; } 
 input：-moz-placeholder {color：red; } 
 
 .row input [type =text] {
 color：blue; 
} 
  

演示：
http://jsfiddle.net/C6fjh/

解决方案

我的工作，只是最后的规则被认为更具体的Firefox。尝试此操作：

  ::  -  webkit-input-placeholder {color：red; } 
 .row input [type =text] ::  -  moz-placeholder {color：red; } 
 .row input [type =text]： -  moz-placeholder {color：red; } 
 
 .row input [type =text] {
 color：blue; 
} 
  

请参阅这个小提琴一个工作演示。

我不确定浏览器的差异来自哪个，是正确的。标签和 a 标签的类似实验 c $ c>：hover 伪类在FF和Chrome中显示相同的行为：如果元素的选择器更具体（如果你做出与我建议的相同的更改您在Chrome和FF中都会遇到相同的（预期？）行为。

Please see the code below, the CSS for the placeholder does not work in the Firefox (latest version), but it works fine with the Chrome. How can I fix it for Firefox?

There are multiple input colors for the fields, but I only one color for the placeholder, so I do not want to specify any class name in the moz-placeholder property, so that it applies to all input fields.

HTML:

<div class="row">
    <input type="text" placeholder="some text asdf" value="" />
</div>

CSS:

::-webkit-input-placeholder { color:red; }
::-moz-placeholder { color:red; }
input:-moz-placeholder { color:red; }

.row input[type="text"]{
     color: blue;     
}

Demo: http://jsfiddle.net/C6fjh/

解决方案

I'ts working, it's just that the last rule is considered more specific by Firefox. Try this:

::-webkit-input-placeholder { color:red; }
.row input[type="text"]::-moz-placeholder { color:red; }
.row input[type="text"]:-moz-placeholder { color:red; }

.row input[type="text"] {
     color: blue;     
}

See this fiddle for a working demo.

I'm unsure where the difference in browsers comes from, or which one is "correct". A similar experiment with a tag and :hover pseudo class shows the same behavior in both FF and Chrome: both will ignore the pseudo class color if the element's selector is more specific (and if you make the same change as I suggested above you get the same (expected?) behavior in both Chrome and FF).

这篇关于moz-placeholder在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！