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>
