這篇文章主要介紹CSS修改placeholder樣式的方法是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創新互聯專注于屯昌企業網站建設,自適應網站建設,商城網站定制開發。屯昌網站建設公司,為屯昌等地區提供建站服務。全流程定制網站，專業設計，全程項目跟蹤，創新互聯專業和態度為您提供的服務

項目用經常遇到修改input的placeholder的顏色的需求，這里來看一下placeholder如何用css設置:

首先來看一下chrome默認的input樣式

<input type="text" placeholder="hello world">

(placeholder)

(input style)

可以發現，placeholder和input的默認顏色是有點區別的。現在我們來修改input 的顏色

<input type="text" placeholder="hello world" style="color: red">

(placeholder)

(input)

不難發現color屬性只能改變輸入值的顏色，placeholder的顏色沒人任何變化。so，如何來改變placeholder的顏色。

要改變placeholder的顏色就要使用到偽類::placeholder

<style>
    input::placeholder {
        color: green;
    }
</style>
<input type="text" placeholder="hello world" style="color: red;">

(placeholder)

(input)

需要注意的是::palceholder偽類的兼容性，以上是在chrome瀏覽器的運行結果，同樣的代碼在IE11中就成了這樣

(placeholder - ie11)

(input - ie11)

IE解決方案:

首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder,并且屬性需要加上!important提高優先級。

<style>
    input:-ms-input-placeholder {
        color: green !important;
    }
</style>
<input type="text" placeholder="hello world" style="color: red;">

(placeholder ie11)

(input ie11)

之后給出其他瀏覽器的適配方案

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

以上是CSS修改placeholder樣式的方法是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

文章題目：CSS修改placeholder樣式的方法是什么
分享路徑：http://vcdvsql.cn/article32/gdgesc.html

成都網站建設公司_創新互聯，為您提供定制開發、靜態網站、外貿網站建設、小程序開發、網站制作、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯