个性化阅读
专注于IT技术分析

如何在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>

输出如下:

null

范例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>

输出如下:

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

赞(0) 打赏
未经允许不得转载:srcmini » 如何在HTML中对齐占位符文本?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏