[CSS3]如何用 CSS 來改變 Placeholder 這個屬性的文字顏色

用CSS來格式化 Placeholder
用CSS來格式化 Placeholder

前一篇文章中(文字輸入欄 Input 的新屬性:Placeholder 是什麼?怎麼用?以及他的黑暗面),
我們提到了在 HTML5 的規範裡,提供了一個新的,專門用在文字欄位(Input)裡的新屬性 Placeholder。


這個 Placeholder 屬性是很方便,不過也有一些陷阱和限制,其中比較明顯的一項,就是一般瀏覽器在顯示這個 Placeholder 文字時,預設的顏色對比普遍都太低了,不是很容易閱讀。
所以接著我們就來跟大家分享一下,如何用 CSS 來改變 Placeholder 的文字顏色。


改變 Placeholder 文字顏色的 CSS 語法


首先,我們一樣先建立一個輸入欄位搭佩 Placeholder 的範例。



<label>站內搜尋</label>
<input type="text" placeholder="輸入搜尋文字" />

網頁顯示結果:


接下來我們的任務就是把上面這個欄位裡面的 Placeholder 字串:「輸入搜尋文字」,用CSS改變瀏覽器預設的顏色。
CSS 語法如下:



::placeholder { /* CSS 3 標準 */
color: tomato;
}
::-webkit-input-placeholder { /* Chrome, Safari */
color: tomato;
}
:-ms-input-placeholder { /* IE 10+ */
color: tomato;
}
::-moz-placeholder { /* Firefox 19+ */
color: tomato;
opacity: 1;
}

套用上面的CSS語法後,我們之前的範例就會顯示為下面這個樣子:


CSS 語法說明


這個 CSS 語法很簡單,就是一行顏色標記:color: tomato。
我們這個範例中,用的顏色是番茄紅(tomato),你可以把 tomato 換成任何一個你想要顏色碼。


當然顏色碼是最簡單的那部分。
比較特別的地方是這個語法所使用的選擇器。
由於 Placeholder 並不是正規的網頁元素,而僅僅是一個標籤內的屬性,所以如果要用 CSS 來指定這個屬性,必須要用偽元素選擇器(Pseudo-Elements Selector)模式,就是前面要加上兩個冒號 ::,然後打上 placeholder


關於這兩個冒號,其實只打一個冒號也可以,只是新的CSS規範是定義為兩個冒號,往下相容,所以其實打一個也是可以的,像是上面的例子中,針對 IE 10+ 的那段語法,用的就是一個冒號,那是因為舊版的IE還沒有支援新的CSS規範。


偽元素 ::placeholder 與它的相容性


一般標準的 CSS 3 定義中,直接使用 ::placeholder 就可以了,當然這有可能會有相容性的問題,就是不同的瀏覽器,不見得會支援到這個規則。

Chrome 和 Safari 最新版都是支援這個語法的。

如果是比較舊的版本,那麼就要加上特定的寫法,就是第二段語法以後那幾段:

  • ::-webkit-input-placeholder:這個就是針對舊版的 Chrome, Safari 特定的語法。
     
  • :-ms-input-placeholder:這個則是針對 IE 瀏覽器的寫法。
     
  • ::-moz-placeholder:這是給 Firefox 瀏覽器用的。

如果你確認你的使用者絕大部分使用的都是新版的瀏覽器,那麼其實就保留第一行 ::placeholder 就可以了。


除了顏色,Placeholder 也可以改變其他樣式


CSS 除了改變 Placeholder 的顏色以外,也可以同時改變其他的樣式,像是字型、大小、粗體、斜體等等。
語法上就跟一般CSS語法一樣,直接往下寫就可以了。

::placeholder {
color: tomato;
font-size:0.9em;
font-weight:bold;
padding-left:1em;
}

上面的CSS語法顯示出來的結果就是:

 

Placeholder 變更顏色要特別留意


當你改變 Placeholder 這個屬性的顏色時,要留意幾個重點:

  • 顏色不要跟原本文字輸入時的顏色一樣。
     
  • 留意 input 欄位背景底色,對比要拉出來。
     
  • 查看在手機裝置上顯示的感覺。

我們逐項跟大家說明一下。


1. 顏色不要跟原本文字輸入時的顏色一樣


如果把 Placeholder 的文字顏色,改的跟原本 Input 輸入的顏色一樣的話,有極高的可能會造成使用者的混淆,讓使用者誤以為這個欄位是已經填寫過了,然後忽略它。


2. 留意 input 欄位背景底色,對比要拉出來


如果 Input 欄位的背景底色不是白色的,那要記得變更後的文字顏色,要把對比拉出來,以避免使用者閱讀上的困難。


3. 查看在手機裝置上顯示的感覺


依據不同網站的屬性,很可能你的網站使用者,絕大部分是從行動裝置來的。
所以除了在桌面上查看變更後的結果,也務必查看一下手機上顯示的感覺,很可能一到了手機上顯示,就會變的很不易閱讀,不清晰等等。