javascript - 如何更改 <input/> 的占位符颜色？

Question

我尝试使用样式表和 <input/> 执行以下操作但是占位符的颜色仍然没有改变并保持默认颜色。我做错了吗？

我的 CSS 样式表:

#input-field {
  background-color: rgba(255,255,255,0.1);
  border: 0;
  border-radius: 5px;
  width: 150px;
  height: 40px;
  padding: 12px;
  box-shadow: none;
  color: rgba(255,255,255,0.8);
}

:-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    blue;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    blue;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    blue;
   opacity:  1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    blue;
}

还有我的<input/> :

  <input
    className="form-control"
    id="input-field"
    placeholder='Change This Color'
  />

Answer 1

webkit 需要两个冒号 ::

#input-field {
  font-family: serif;
  background-color: rgba(255,255,255,0.1);
  border: 0;
  border-radius: 5px;
  width: 150px;
  height: 40px;
  padding: 12px;
  box-shadow: none;
  color: rgba(255,255,255,0.8);
}

::-webkit-input-placeholder {
   color: blue;
}

:-moz-placeholder { /* Firefox 18- */
   color: blue; 
   opacity:  1;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: blue;  
   opacity:  1;
}

:-ms-input-placeholder {  
   color: blue;  
}

<input
    className="form-control"
    id="input-field"
    placeholder='Change This Color'
  />

要更改字体系列，请将 font-family: serif; 添加到 #input-field