placeholder 是HTML5中的新屬性,適用于以下的 <input> 類型:text, search, url, telephone, email 以及 password。
設置對象文字占位符的樣式。
::placeholder 偽元素用于控制表單輸入框占位符的外觀,它允許開發者/設計師改變文字占位符的樣式,默認的文字占位符為淺灰色。
當表單背景色為類似的顏色時它可能效果并不是很明顯,那么就可以使用這個偽元素來改變文字占位符的顏色。
需要注意的是,除了Firefox是 ::[prefix]placeholder,其他瀏覽器都是使用 ::[prefix]input-placeholder
Firefox支持該偽元素使用text-overflow屬性來處理溢出問題。
::placeholder的使用示例:
<input type="text" placeholder="占位符" />
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}兼容性問題:

示例:
HTML代碼:
<input type="text" id="userName" placeholder="請輸入用戶名">
CSS代碼:
#userName::-webkit-input-placeholder {
color: red;
}
#userName:-moz-placeholder { // Firefox4-18
color: red;
}
#userName::-moz-placeholder { // Firefox19+
color: red;
}
#userName:-ms-input-placeholder { // IE10+
color: red;
}效果:

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。