修改HTML5 input placeholder 顔色及修改失效的解決辦法

<code>input::input-placeholder{</code><code>color</code><code>:  </code><code>#bdbdbd</code> <code>;} </code><code>/* 有些資料顯示需要寫，有些顯示不需要，但是在編輯器webstorm中該屬性不被識别 */</code><code>::-webkit-input-placeholder { </code><code>/* WebKit browsers */</code> <code>color</code><code>: </code><code>#999</code><code>; </code>

<code>} :-moz-placeholder { </code><code>/* Mozilla Firefox 4 to 18 */</code> <code>color</code><code>: </code><code>#999</code><code>; </code>

<code>} ::-moz-placeholder { </code><code>/* Mozilla Firefox 19+ */</code> <code>color</code><code>: </code><code>#999</code><code>; </code>

<code>} :-ms-input-placeholder { </code><code>/* Internet Explorer 10+ */</code> <code>color</code><code>: </code><code>#999</code><code>; </code>

<code>}</code>

這段代碼在單獨試用沒有問題，在有時候做項目的時候會出現加此代碼不生效的情況，原因可能是項目用的架構中底層已經寫好了placeholder的屬性顔色，再寫一個不能替換掉底層顔色，是以必須給每個屬性值加！important；這樣就可以成功執行了。

本文轉自 蓓蕾心晴 51CTO部落格，原文連結：http://blog.51cto.com/beileixinqing/1878290，如需轉載請自行聯系原作者