修改input框中placeholder的字體顏色

發(fā)布時(shí)間：2020-07-12 19:21:33 來源：網(wǎng)絡(luò) 閱讀：12606 作者：frwupeng517 欄目：開發(fā)技術(shù)

placeholder 是HTML5中的新屬性，適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。

設(shè)置對(duì)象文字占位符的樣式。

::placeholder 偽元素用于控制表單輸入框占位符的外觀，它允許開發(fā)者/設(shè)計(jì)師改變文字占位符的樣式，默認(rèn)的文字占位符為淺灰色。

當(dāng)表單背景色為類似的顏色時(shí)它可能效果并不是很明顯，那么就可以使用這個(gè)偽元素來改變文字占位符的顏色。

需要注意的是，除了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;
}

兼容性問題：

修改input框中placeholder的字體顏色

示例：

HTML代碼：

<input type="text" id="userName" placeholder="請(qǐng)輸入用戶名">

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;
}

效果：

修改input框中placeholder的字體顏色

向AI問一下細(xì)節(jié)

修改input框中placeholder的字體顏色

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽