修改 input / textarea placeholder 屬性的顏色和字體大小

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #666;
    font-size: 16px;  
}
input::-moz-placeholder, 
textarea::-moz-placeholder {  /* Mozilla Firefox 19+ */
    color: #666;
    font-size: 16px;  
}
input:-moz-placeholder, 
textarea:-moz-placeholder {  /* Mozilla Firefox 4 to 18 */
    color: #666;
    font-size: 16px;  
}
input:-ms-input-placeholder, 
textarea:-ms-input-placeholder {  /* Internet Explorer 10-11 */
    color: #666;
    font-size: 16px;  
}

注意：

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

　　2、針對火狐瀏覽器則有兩種寫法，一種是針對低版本的，一種是針對高版本的，二者都需要帶上-moz-前綴。要點1：火狐低版本的使用冒號（:），而高版本的使用雙冒號（::）；要點2：火狐瀏覽器不需要像webkit內核那樣要帶上input。

　　3、由於 placeholder 屬性只在IE10+才支持，因此，針對IE10、IE11的寫法是加上-ms-前綴，使用的是冒號（:），需要帶上input

 

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

 

不用CSS得到同樣效果的方法：

<input type="text" value="placeholder text" onfocus="this.style.color='#000';this.value='';" style="color: #f00;"/>

這個方法也不是很友好，當內容輸入一半若點擊到文本框外的地方，再重新輸入的時候，前面輸入的內容為空了 o'o 所以還是少用吧~~

 

 

轉自博客：

https://www.cnblogs.com/dhui/p/10415586.html