1. 程式人生 > >如何更改input中placeholder的顏色

如何更改input中placeholder的顏色

示例:

更改前:

更改後:

在我們經常寫input時,我們一般都是使用placeholder的顏色,但是看起來真的很戳,當美工給我們設計了一個精美的input背景時,placeholder的內容就很難看清楚,我們就要對其進行更改顏色。

但是我們對input的color更改成其它顏色時,只會對input輸入的內容進行賦值顏色,而placeholder還是預設顏色。

我們可以這樣對它控制:

<style>
        input::-webkit-input-placeholder{
            color:red;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:red;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:red;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:red;
        }
</style>

針對不同版本和瀏覽器時會有不同的寫法,需要新增相應的字尾

注意:

1、WebKit, Blink, Edge瀏覽器等需要帶上-webkit-字首,且是雙冒號,寫的時候還要帶上input  

2、針對火狐瀏覽器則有兩種寫法,一種是針對低版本的,一種是針對高版本的,二者都需要帶上-moz-字首。要點1:火狐低版本的使用冒號(:),而高版本的使用雙冒號(::);要點2:火狐瀏覽器不需要像webkit核心那樣要帶上input。  

3、由於placeholder屬性只在IE10+才支援,因此,針對IE10、IE11的寫法是加上-ms-字首,使用的是冒號(:),需要帶上input    

特別強調:冒號與雙冒號的問題,還有是否需要加上input