在HTML5中為input標簽添加了一個新的屬性為placeholder,此placeholder屬性可以在input沒有任何輸入或value的屬性為空的情況下,來提示用戶在input中該輸入什么樣的內容,達到一個提示的作用。

以前使用placeholder屬性的時候,并未對其進行過CSS定義,一直是瀏覽器默認的樣式,但最近有小伙件一直問我placeholder屬性該如何給它定義一個樣式,并改變提示文字的顏色。下面詳細的和大家說一下。

input標簽placeholder屬性的用法

代碼

<input placeholder='這里是提示的文字' type='text'>

代碼示圖

placeholder屬性定義

代碼運行結果

placeholder屬性的用法與定義

給input標簽的placeholder屬性添加CSS樣式,改變其文字的顏色

CSS代碼

在<head>標簽內添加如下代碼

<style>
    input::-webkit-input-placeholder 
        color:blue;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: blue;
    }
    input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: blue;
    }
    input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: blue;
    }
</style>

HTML代碼

<input placeholder='這里是提示的文字' type='text'>

代碼示圖

placeholder的樣式定義,placeholder的CSS樣式

代碼運行結果:

placeholder的樣式定義,placeholder樣式管理

注意說明:

国产视频app1、此CSS代碼并不能在所有的瀏覽器中生效

2、WebKit, Blink, Edge瀏覽器等需要帶上-webkit-前綴,且是雙冒號,寫的時候還要帶上input

国产视频app3、針對火狐瀏覽器則有兩種寫法,一種是針對低版本的,一種是針對高版本的,二者都需要帶上-moz-前綴。要點1:火狐低版本的使用冒號(:),而高版本的使用雙冒號(::);要點2:火狐瀏覽器不需要像webkit內核那樣要帶上input。

国产视频app4、由于placeholder屬性只在IE10+才支持,因此,針對IE10、IE11的寫法是加上-ms-前綴,使用的是冒號(:),需要帶上input