CSS 偽元素 ::placeholder：輸入欄位的提示文字樣式

不行。使用者開始輸入後提示就消失了，螢幕閱讀器的支援也不一致。欄位名稱請一律用 label，提示文字只補充輸入範例。

搭配 placeholder-shown 偽類，就能區分空白與已輸入兩種狀態，常用來做出標籤浮動的效果。

在相關文字欄位元素或選取器後面使用 ::，再接續 placeholder 即可選取到這個偽元素並進行佔位符的樣式設定。

以下案例便是利用 ::placeholder 將對象選取出來並進行樣式的改變。

可以設定的屬性

只有文字相關的屬性有效：

css

input::placeholder {
  color: #9ca3af;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  opacity: 1;   /* 部分瀏覽器預設會降低透明度 */
}

:placeholder-shown 可以判斷欄位目前是不是空的，常用來做標籤浮動：

css

.field input:placeholder-shown + label {
  transform: translateY(1.5rem);
  font-size: 1rem;
}

小提醒

提示文字的顏色太淡會直接變成無障礙問題。另外，它 不能取代 欄位說明 <label>：使用者一開始輸入，提示就消失了。

可以設定哪些屬性？

只有與文字相關的屬性有效，例如：顏色、字級、字重、字距與透明度。版面相關的屬性在這個偽元素上不會生效。

提示文字的顏色可以很淡嗎？

不建議。它與背景的對比度太低時會很難閱讀，也會在無障礙檢測中被判定為不合格。建議維持在可清楚辨識的程度。

可以用它取代欄位標籤嗎？

不行。使用者開始輸入後提示就消失了，螢幕閱讀器的支援也不一致。欄位名稱請一律用 <label>，提示文字只補充輸入範例。

要怎麼在有輸入時改變樣式？

搭配 :placeholder-shown 偽類，就能區分空白與已輸入兩種狀態，常用來做出標籤浮動的效果。