srcmini占位符属性指定一个简短提示, 用于描述输入字段/文本区域的期望值。在用户输入值之前, 该字段中会显示简短提示。在大多数浏览器中, 占位符文本通常在左侧对齐。选择器使用text-align属性在占位符中设置文本对齐方式。
该选择器可以将浏览器更改为浏览器。例如：
- 对于Chrome, Mozilla和Opera浏览器：
::placeholder
- 对于Internet Explorer：
:-ms-input-placeholder
范例1：本示例仅说明占位符对齐, 不说明占位符值。
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder alignment</title>
<style>
input[type="email"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: center;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: right;
}
input[type="tel"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: left;
}
input[type="email"]:-ms-input-placeholder {
/* Internet Explorer 10-11 */
text-align: center;
}
input[type="email"]::-ms-input-placeholder {
/* Microsoft Edge */
text-align: center;
}
body {
text-align:center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>srcmini</h1>
<h3>Placeholder Text Alignment</h3>
<p>Center Aligned<br><input type = "email"
placeholder = "Email"></p><br>
<p>Right Aligned<br><input type = "text"
placeholder = "Name"></p><br>
<p>Left Aligned<br><input type = "tel"
placeholder = "Phone Number"></p>
</body>
</html>输出如下：
范例2：本示例描述了占位符和占位符值的对齐方式。
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder alignment</title>
<style>
input[type="email"]{
text-align: center;
}
input[type="text"] {
text-align: right;
}
input[type="tel"] {
text-align: left;
}
body {
text-align:center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>srcmini</h1>
<h3>Placeholder Text Alignment</h3>
<p>Center Aligned<br><input type = "email"
placeholder = "Email"></p><br>
<p>Right Aligned<br><input type = "text"
placeholder = "Name"></p><br>
<p>Left Aligned<br><input type = "tel" placeholder = "Phone Number"></p>
</body>
</html>输出如下：
评论前必须登录！
注册