如何在Firefox上设置占位文本的颜色

Question

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

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

<input id="myinput" type="text" placeholder="my placeholder" maxlength="30" name="myplaceholder">

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

这是我的JSFiddle

- t q

---

我怀疑这更多地是由于字体渲染的差异，而不是其他颜色看起来有点“褪色”。 - Paulie_D

Answer 1

在Firefox的占位符中添加opacity: 1。

input#myinput::-webkit-input-placeholder {
   color:#FFF; background-color:#CCC; 
}
input#myinput::-moz-placeholder { 
      color:#FFF; background-color:#CCC;  
    opacity: 1;
}
input#myinput:-moz-placeholder { 
      color:#FFF; background-color:#CCC; 
    opacity: 1;
}

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

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

<input id="myinput" type="text" placeholder="my placeholder" maxlength="30" name="myplaceholder">

JSFiddle

- Fabrício Matté

---

小提琴不再存在了。 - Tsundoku

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

- DevWL

---

这似乎是在重复两年前Fabricio提出的解决方案。 - undefined

Answer 3

尝试

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

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

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

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

- Ilja

---

我有这个，这不是和我的CSS一样吗？ - t q

这是正确的，但是还需要在两个moz-placeholder定义中添加"opacity: 1"。 - Szorstki

这正是OP已经提到的。应该删除它。 - undefined