如何改變 <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

Answer 2

在您的HTML頁面中

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

在你的CSS頁面

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
  font-family:Helvetica Neue;
}

font-family:Helvetica Neue在為我工作， 這里是鏈接

Answer 3

只需將這段代碼記下來。 您的錯誤是您忘記放入冒號。

我花了很多時間，但這歸結為在:-webkit-input-placeholder之后加上另一個冒號，使其成為::-webkit-input-placeholder 。

我只是發現其他人回答的方式與我完全相同，我不是要復制它們，因為我自己弄清楚了。

看完整的代碼。 PS我使font-family看起來像草書。

 #input-field { background-color: rgba(255, 255, 255, 0.1); border: 0; border-radius: 5px; width: 150px; height: 40px; padding: 12px; color: red; box-shadow: none; font-family: cursive; } ::-webkit-input-placeholder { color: blue; font-family: cursive; } :-moz-placeholder { /* Firefox 18- */ color: red; opacity: 1; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; } :-ms-input-placeholder { color: red; } 

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