HTML的placeholder属性指定一个简短提示，用于描述input字段或文本区域（textarea）的预期值，即占位符文本。短提示在用户输入值之前显示在字段中。在大多数浏览器中，占位符文本通常左对齐。那么如何设置占位符文本的对齐方法？下面本篇文章就来介绍一下，希望对大家有所帮助。
CSS如何设置占位符文本的对齐方式？
可以通过CSS的placeholder选择器使用text-align属性设置占位符文本的对齐方式。
语法：
这个CSS placeholder选择器在不同的浏览器中有不同的写法，例如：
对于Chrome，Mozilla和Opera浏览器：
::placeholder
对于Internet Explorer：
:-ms-input-placeholder
示例：设置占位符文本对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>占位符对齐</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>
<h3>占位符文本对齐方式</h3>
<p>中心对齐<br><input type="email" placeholder="Email"></p><br>
<p>右对齐<br><input type="text" placeholder="Name"></p><br>
<p>左对齐<br><input type="tel" placeholder="Phone Number"></p>
</body>
</html>
效果图：
网友评论