CSS如何修改placeholder樣式

maochunguang 發(fā)布于2019-08-02 11:58 / 3285人閱讀

摘要：項目用經(jīng)常遇到修改的的顏色的需求，這里來看一下如何用設(shè)置原文發(fā)布與我的個人博客首先來看一下默認(rèn)的樣式可以發(fā)現(xiàn)，和的默認(rèn)顏色是有點區(qū)別的。現(xiàn)在我們來修改的顏色不難發(fā)現(xiàn)屬性只能改變輸入值的顏色，的顏色沒人任何變化。

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

原文發(fā)布與我的個人博客>>

首先來看一下chrome默認(rèn)的input樣式

(placeholder)

(input style)

可以發(fā)現(xiàn)，placeholder和input的默認(rèn)顏色是有點區(qū)別的。現(xiàn)在我們來修改input 的顏色

(placeholder)

(input)

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

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

(placeholder)

(input)

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

(placeholder - ie11)

(input - ie11)

IE解決方案:

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

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