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. [email protected]">
</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>

打印页面