[CSS3]如何用 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. 查看在手機裝置上顯示的感覺

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