CSS - 伪元素 - ::placeholder

描述

::placeholder 伪元素表示 <input> 或 <textarea> 字段中的占位符文本。作为占位符的文本提供了需要在字段中输入的内容的提示。CSS 属性可用于更改文本的外观，例如，设置字体和颜色。

只有应用于 ::first-line 伪元素的 CSS 属性子集才能在其选择器中使用 ::placeholder 的规则中使用。

语法


 selector::placeholder { 
/* ... */ 
}

可访问性问题：

检查占位符文本的颜色与输入背景之间的对比度非常重要。
如果颜色对比度很高，则占位符文本可能会与输入的文本混淆。因此，为了避免这种混淆，您可以使用 aria-describedby 属性来添加更接近的文本，为用户提供提示。
在 Windows 高对比度模式下，当用户输入的文本以与占位符文本相同的样式呈现时，很难区分占位符文本和输入的文本。
占位符不能替代 <label> 元素。辅助技术无法解析 <input> 元素。

CSS ::placeholder 示例

下面是一个示例：::placeholder pseudo-element：


<html>	
<head>
<style>
	 	.form {
	 	 	 border: 2px solid black;
	 	 	 background: lightgray;
	 	 	 margin: 15px;
	 	 	 padding: 25px;
	 	 	 width: 250px;
	 	}

	 	input::placeholder {	
	 	 	 color: grey;	
	 	 	 font-style: italic;
	 	 	 background-color: cornsilk;
	 	 	 padding: 5px;
	 	}

	 	input {
	 	 	 margin-bottom: 3px;
	 	}
</style>
</head>
<body>
	 	<div class="form">
	 	 	 <input type="text" placeholder="First Name">
	 	 	 <input type="text" placeholder="Last Name">
	 	 	 <input type="text" placeholder="Address">
	 	 	 <input type="text" placeholder="Phone">
	 	</div>
</body>
</html>

CSS - 伪元素 - ::placeholder - 不透明文本

此功能只能在 Firefox 上查看。

像Firefox这样的浏览器将占位符的不透明度设置为小于100%。设置 opacity：1 以获得完全不透明的占位符文本，如以下示例所示：


<html>	
<head>
<style>
	 	input::placeholder {	
	 	 	 color: blue;	
	 	 	 padding: 5px;
	 	}
	 	.opaque-text::placeholder {
	 	 	 opacity: 1;
	 	}
</style>
</head>
<body>
	 	<h2>Execute on Firefox browser</h2>
	 	<div class="form">
	 	 	 <input type="text" placeholder="Default Opacity">
	 	 	 <input type="text" class="opaque-text" placeholder="Forced Opcaity">
	 	</div>
</body>
</html>

打印本页