CSS - 偽元素 - ::placeholder

描述

::placeholder 偽元素代表 <input> 或 <textarea> 欄位中的佔位符文字。佔位符文字提示使用者需要在欄位中輸入什麼內容。可以使用 CSS 屬性更改文字的外觀，例如設定字型和顏色。

只有適用於::first-line偽元素的 CSS 屬性子集才能在選擇器中使用::placeholder 的規則中使用。

語法

selector::placeholder {
    /* ... */
}

無障礙問題

務必檢查佔位符文字顏色與輸入背景之間的對比度。

如果顏色對比度高，佔位符文字可能會與已輸入文字混淆。為了避免這種混淆，您可以使用aria-describedby屬性新增更接近的文字，為使用者提供提示。

在 Windows 高對比度模式下，如果使用者輸入的文字與佔位符文字具有相同的樣式，則很難區分佔位符文字和已輸入文字。

佔位符不能替代<label>元素。輔助技術無法解析<input>元素。

CSS ::placeholder 示例

這是一個::placeholder偽元素的示例

<html> 
<head>
<style>
   .form {
      border: 2px solid black;
      background: lightgray;
      margin: 15px;
      padding: 25px;
      width: 250px;
   }

   input::placeholder { 
      color: grey; 
      font-style: italic;
      background-color: cornsilk;
      padding: 5px;
   }

   input {
      margin-bottom: 3px;
   }
</style>
</head>
<body>
   <div class="form">
      <input type="text" placeholder="First Name">
      <input type="text" placeholder="Last Name">
      <input type="text" placeholder="Address">
      <input type="text" placeholder="Phone">
   </div>
</body>
</html>

CSS - 偽元素 - ::placeholder - 不透明文字

此功能僅在 Firefox 上可見。

像 Firefox 這樣的瀏覽器將佔位符的不透明度設定為小於 100%。設定opacity: 1可以獲得完全不透明的佔位符文字，如下例所示

<html> 
<head>
<style>
   input::placeholder { 
      color: blue; 
      padding: 5px;
   }
   .opaque-text::placeholder {
      opacity: 1;
   }
</style>
</head>
<body>
   <h2>Execute on Firefox browser</h2>
   <div class="form">
      <input type="text" placeholder="Default Opacity">
      <input type="text" class="opaque-text" placeholder="Forced Opcaity">
   </div>
</body>
</html>

列印頁面