Question

Bootstrap v2.3.1 - 较少占位符样式处理chrome但不适用于Mozilla最新版本

请帮忙这里的代码少了

.placeholder(red);

Answer 1

Mozilla更新语法

在version 19.0 release notes中，它声明它将-moz-placeholder从伪类（:-moz-placeholder）更改为伪元素（::-moz-placeholder，注意双冒号< / em>）这是implementing this bug fix。显然它没有向后兼容，因为the double-colon syntax works in this fiddle but the single colon syntax does not。

然而，Bootstrap目前（6-6-2013）有假类（单冒号）版本in its mixin（截至本文撰写时第83行）。因此，您需要手动修复引导程序的mixins.less文件以将其更正为新语法（不是我的第一选择），或者创建自己的覆盖mixin以添加新语法，如此（更好）选择）：

.placeholder(@color: @placeholderText) { &::-moz-placeholder { color: @color; } }

Once bootstrap is updated to version 3，然后你可以摆脱你的覆盖混合。

Answer 2

更改mixins文件

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}

&::-moz-placeholder { // this for latest mozilla
    color: @color;
  }
}

Answer 3

 <style>
 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
 }
 ::-moz-placeholder { /* Firefox 19+ */
  color: pink;
 }
 :-ms-input-placeholder { /* IE 10+ */
  color: pink;
 }
 :-moz-placeholder { /* Firefox 18- */
  color: pink;
 }
 <style>
<input type="email" placeholder="anytext">

占位符不工作mozilla最新的bootstrap

3 个答案:

Mozilla更新语法