html - 占位符在引导程序中无法使用最新的 mozilla

Question

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

请在这里帮助减少代码

.placeholder(red);

Answer 1

Mozilla 更新语法

在19.0 版本的发行说明中，它声明它-moz-placeholder从一个伪类 ( :-moz-placeholder) 更改为一个伪元素（::-moz-placeholder注意双冒号），它正在实现这个错误修复。显然它没有向后兼容，因为双冒号语法在这个小提琴中有效，但单冒号语法不。

然而，Bootstrap 目前（2013 年 6 月 6 日）在其 mixin 中具有伪类（单冒号）版本（撰写本文时的第 83 行）。因此，您需要手动修复mixins.lessbootstrap 文件以将其更正为新语法（不是我的首选），或者创建自己的覆盖 mixin 以添加新语法，如下所示（更好的选择）：

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

一旦 bootstrap 更新到版本 3，您就可以摆脱您的覆盖 mixin。

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">