[CSS+HTML5] 變更 input placeholder 顏色(支援主流三大瀏覽器)


HTML

<input type="text" placeholder="佔位符想要變色" />
 

CSS

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

效果區

測試:
 

偽類及偽元素說明

想修改 input placeholder 顏色有三種實現方式:偽元素(pseudo-elements)、偽類( pseudo-classes)和Notihing。

WebKit和Blink(Safari,Google Chrome, Opera15+)使用偽元素。
::-webkit-input-placeholder

Mozilla Firefox 4-18使用偽類
:-moz-placeholder

Mozilla Firefox 19+ 使用偽元素
::-moz-placeholder

IE10使用偽類
:-ms-input-placeholder

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 1891
Last updated :2017-06-30