CSS偽類 - :placeholder-shown

CSS :placeholder-shown 偽類選擇當前顯示佔位符文字的輸入元素。

語法

:placeholder-shown {
   /* ... */
}

CSS :placeholder-shown - 基本示例

以下示例演示瞭如何使用:placeholder-shown偽類為顯示佔位符文字的輸入欄位應用特殊的字型和邊框樣式：

<html>
<head>
<style>
   label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
   }
   input:placeholder-shown {
      border: 3px solid pink; 
      font-style: italic;
   }
</style>
</head>
<body>
   <label for="email">Email:</label>
   <input type="email" id="email" placeholder="Enter your email">
</body>
</html>

CSS :placeholder-shown - 溢位文字

以下示例演示瞭如何使用:placeholder-shown偽類為其佔位符文字由於寬度而溢位輸入欄位的輸入欄位設定樣式：

<html>
<head>
<style>
   label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
   }
   input:placeholder-shown {
      text-overflow: ellipsis;
   }
</style>
</head>
<body>
   <label for="email">Email:</label>
   <input type="email" id="email" placeholder="Enter your email eg. example123@gmail.com">
</body>
</html>

CSS :placeholder-shown - 自定義輸入欄位

以下示例演示瞭如何使用:placeholder-shown偽類突出顯示具有自定義樣式的客戶 ID 欄位：

<html>
<head>
<style>
   label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
   }
   input#customerid:placeholder-shown {
      border: 3px solid red;
      font-style: normal;
      background-color: pink;
   }
   .submit-button {
      display: block;
      margin-top: 10px; 
   }
</style>
</head>
<body>
   <form>
      <label for="username">Username:</label>
      <input type="text" id="username" placeholder="Enter your username">

      <label for="useremail">Email Address:</label>
      <input type="email" id="useremail" placeholder="Enter your email">

      <label for="customerid">Customer ID:</label>
      <input type="text" id="customerid" placeholder="PT20156">
      
      <input type="submit" class="submit-button" value="Submit">
   </form>
</body>
</html>

列印頁面