How to change placeholder color for number input? (Firefox)

So I am aware how to specify the color of the placeholder of an HTML input using CSS. However this does not seem to be working for input fields of type number in Mozilla Firefox (Works like a charm though in Chrome). Are there any workarounds for this?

Sample HTML

<div class="form-group">
  <input type="number" class="form-control" placeholder="Amount">
</div>

Sample CSS

.form-control:-moz-placeholder {
  color: #999999;
}
.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}

UPDATE

Changing the color of field changes the placeholder's holder to a darker shade.

---

try this

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}

http://jsfiddle.net/hbirjand/7x61fmgt/

---

BUT

input with type="number" It's apparently a bug: Firefox bug

---

这似乎是一个输入类型编号的错误，因此您可以使用以下方式：

input[type="number"]{
  color: #f00;
}
input[type="number"]:active,input[type="number"]:focus,input[type="number"]:hover{
  color: #000;
  }

<div class="form-group">
  <input type="number" class="form-control" placeholder="Amount">
</div>

链接地址: http://www.djcxy.com/p/70466.html

上一篇: 检查webkit

下一篇: 如何更改数字输入的占位符颜色？ （火狐）