CSS 伪类

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">邮箱:</label>
   <input type="email" id="email" placeholder="输入邮箱">
</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">邮箱:</label>
   <input type="email" id="email" placeholder="输入邮箱例如： example123@qq.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">用户名:</label>
      <input type="text" id="username" placeholder="输入用户名">

      <label for="useremail">邮箱:</label>
      <input type="email" id="useremail" placeholder="输入邮箱">

      <label for="customerid">ID:</label>
      <input type="text" id="customerid" placeholder="123">
      
      <input type="submit" class="submit-button" value="提交">
   </form>
</body>
</html>