1、CSS選擇器

因為每個瀏覽器的CSS選擇器有所差異，所以需要針對每個瀏覽器做單獨的設定。

::-webkit-input-placeholder { /* WebKit browsers */?
color: #999;?
}?
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */?
color: #999;?
}?
::-moz-placeholder { /* Mozilla Firefox 19+ */?
color: #999;?
}?
:-ms-input-placeholder { /* Internet Explorer 10+ */?
color: #999;?
}?

2、textarea風格樣式的代碼，如下：

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {?
color: #636363;?
}?
input:-moz-placeholder, textarea:-moz-placeholder {?
color: #636363;?
}?

3、指定修改哪個input的placehoder屬性，可以使用class

input.addCardInput::-webkit-input-placeholder{
color: #ccc;
}
input.addCardInput:-moz-placeholder{
color: #ccc;
}
input.addCardInput::-moz-placeholder{
color: #ccc;
}
input.addCardInput:-ms-input-placeholder{
color: #ccc;
}

4、在Firefox和IE里，正常input文本顏色覆蓋占位符顏色的方法：

::-webkit-input-placeholder {?
color: red; text-overflow: ellipsis;?
}?
:-moz-placeholder {?
color: #acacac !important; text-overflow: ellipsis;?
}?
::-moz-placeholder {?
color: #acacac !important; text-overflow: ellipsis;?
} /* for the future */?
:-ms-input-placeholder {?
color: #acacac !important; text-overflow: ellipsis;?
}?

轉載于:https://www.cnblogs.com/carriezhao/p/6927431.html

總結

以上是生活随笔為你收集整理的修改input的placeholder颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。