如何在HTML中对齐占位符文本？

占位符属性指定一个简短提示, 用于描述输入字段/文本区域的期望值。在用户输入值之前, 该字段中会显示简短提示。在大多数浏览器中, 占位符文本通常在左侧对齐。选择器使用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>

输出如下：

来源：

https://www.srcmini02.com/68404.html

猜你喜欢