css - Firefox 上的占位符文本颜色答案

【问题标题】：css - placeholder text color on firefoxcss - Firefox 上的占位符文本颜色
【发布时间】：2019-04-16 20:08:36
【问题描述】：

我在input 表单字段中有一个placeholder 文本，我无法似乎将颜色更改为white，它显示为grey，但仅在Firefox 上。 Chrome 浏览器好像没问题。

当您在字段中键入正确的颜色时，它只是最初的 placeholder 没有响应。

任何帮助将不胜感激，谢谢。

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

【问题讨论】：

我怀疑这更多是由于字体渲染差异而不是其他任何颜色，尽管其他颜色看起来确实有点“褪色”。

标签： css

【解决方案1】：

将 opacity: 1 添加到 Firefox 占位符。

查看更新的fiddle

【讨论】：

【解决方案2】：

//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;
}

【讨论】：

【解决方案3】：

试试

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

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

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

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

【讨论】：

我有，这和我的css不一样吗？
是对的，但是两个moz-placeholder定义还要加上"opacity: 1"