css - firefox上的占位符文本颜色

I have a placeholder text inside an input form field that i can't seem to change color to white, it comes out as grey but only on firefox. Chrome browser seems to be fine.

我在输入表单字段中有一个占位符文本，我似乎无法将颜色更改为白色，它显示为灰色但仅在Firefox上。 Chrome浏览器似乎没问题。

When you type into the field the correct color displays, its just the initial placeholder that is not responsive.

当您在字段中键入正确的颜色显示时，它只是没有响应的初始占位符。

Any help will be appreciated please, thank you.

感谢您的帮助，谢谢。

css:

CSS：

input#myinput::-webkit-input-placeholder {
    color:#FFF; background-color:#CCC; 
}
input#myinput::-moz-placeholder { 
    color:#FFF; background-color:#CCC;  
}
input#myinput:-moz-placeholder { 
    color:#FFF; background-color:#CCC; 
}
input#myinput::-ms-input-placeholder { 
    color:#FFF; background-color:#CCC; 
}   /* IE10+ */

input[type="text"]{
    width:170px; height:16px; padding:12px 5px; border:none; 
    color:#FFF; font:14px/14px 'Arial', Helvetica, sans-serif; 
    text-align:center; background-color:#CCC;
}

Heres my fiddle

继承人我的小提琴

3 个解决方案

#1

Add opacity: 1 to the Firefox placeholders.

将不透明度：1添加到Firefox占位符。

See updated fiddle

看到更新的小提琴

#2

Try

尝试

::-webkit-input-placeholder {
   color: #fff;
}

:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

:-ms-input-placeholder {  
   color: #fff;  
}

#3

//PLACEHOLDER EXAMPLE

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #666;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #666;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #666;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #666;
}

#1