CSS设置占位符⽂本的对齐⽅式
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 {
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>
效果图：
更多知识，请查阅 HTML中⽂⽹ ！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。