溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS修改placeholder顏色的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
方法：先使用“::placeholder”選擇器選中需要修改的元素；然后給該元素添加“color:顏色值;”樣式即可。注placeholder是css3新增的選擇器，在不同的瀏覽器需要加不同的前綴（“-ms-”，“ -webkit-”等）。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
placeholder這個(gè)屬性是HTML5中新增的屬性，作用是描述輸入字段預(yù)期值的提示信息
如何修改placeholder的顏色呢?
但是存在一定的瀏覽器兼容問(wèn)題,以chorme為例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input::-webkit-input-placeholder {
color: #aab2bd;
font-size: 12px;
}
input {//邊框效果
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="請(qǐng)輸入">
</body>
</html>chorme瀏覽器對(duì)應(yīng)的選擇器是input::-webkit-input-placeholder
其他瀏覽器的選擇器如下:
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color : red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color : red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color : red;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color : red;
}
input::-ms-input-placeholder { /* Microsoft Edge */
color : red;
}WebKit, Blink, Edge瀏覽器等需要帶上-webkit-前綴，且是雙冒號(hào)，寫的時(shí)候還要帶上input
針對(duì)火狐瀏覽器則有兩種寫法，都需要帶上-moz-前綴?；鸷桶姹镜氖褂妹疤?hào)（：），而高版本的使用雙冒號(hào)（：：）；火狐瀏覽器不需要帶上input。
placeholder屬性只在IE10+才支持，IE10、IE11的寫法是加上-ms-前綴，使用的是冒號(hào)（：），需要帶上input
看完了這篇文章，相信你對(duì)“CSS修改placeholder顏色的方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼