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>

打印本页