如何在 HTML 中对齐输入字段的占位符文本-之路教程

←CSS如何将内联块元素与容器顶部对齐

如何将 Div 元素的内容与底部对齐→

如何在 HTML 中对齐输入字段的占位符文本

::placeholder 伪元素允许为表单元素的占位符文本设置样式。

它可以从浏览器更改为浏览器。

placeholder 属性用于描述输入字段的预期值。
在输入值之前，字段中会显示一个简短的提示。

占位符文本通常在大多数浏览器中向左对齐。

我们使用 text-align 属性来设置占位符中文本的对齐方式。

在我们的代码片段中，我们将逐步演示如何将占位符文本居中。

添加 CSS

将输入的 text-align 属性设置为“center”。
为 Chrome、Opera 和 Safari 使用 ::-webkit-input-placeholder。
使用 :-moz-placeholder for Firefox 18-。

input {
  text-align: center;
}
::-webkit-input-placeholder {
  text-align: center;
}
:-moz-placeholder {
  text-align: center;
}

现在，我们可以将代码的各个部分组合在一起。

将输入字段的占位符文本居中的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input {
        text-align: center;
      }
      ::-webkit-input-placeholder {
        text-align: center;
      }
      :-moz-placeholder {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="POST">
      <input type="email" class="emailField" placeholder="info@onitroad.com" name="email" />
    </form>
  </body>
</html>

结果

让我们看另一个例子，我们使用三个 <input> 元素并分别使用设置为“center”、“right”和“left”的 text-align 属性。
在这个例子中，我们对齐输入字段的占位符和占位符值。

对齐输入字段的占位符和占位符值的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input[type="email"] {
        text-align: center;
      }
      input[type="text"] {
        text-align: right;
      }
      input[type="tel"] {
        text-align: left;
      }
      body {
        text-align: center;
      }
      label {
        display: block;
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <label>Center Alignment
        <br>
        <input type="email" placeholder="Email">
      </label>
      <label>Right Alignment
        <br>
        <input type="text" placeholder="Name">
      </label>      
      <label>Left Alignment
        <br>
        <input type="tel" placeholder="Phone Number">
      </label>
    </form>
  </body>
</html>

现在，我们将演示另一个示例，其中我们的占位符值与中心、右和左对齐，而输入在所有情况下都从左开始。

对齐输入字段的占位符文本的示例：如何在 HTML 中对齐输入字段的占位符文本

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input[type="email"]::placeholder {
        text-align: center;
      }
      input[type="text"]::placeholder {
        text-align: right;
      }
      input[type="tel"]::placeholder {
        text-align: left;
      }
      body {
        text-align: center;
      }
      label {
        display: block;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Placeholder Text Alignment</h1>
    <form action="/form/submit" method="post">
      <label>Center Alignment
        <br>
        <input type="email" placeholder="Email">
      </label>
      <label>Right Alignment
        <br>
        <input type="text" placeholder="Name">
      </label>
      <label>Left Alignment
        <br>
        <input type="tel" placeholder="Phone Number">
      </label>
    </form>
  </body>
</html>

创建 HTML

使用带有操作和方法属性的 <form> 元素。
使用带有类型、类、“占位符”、名称属性的 <input> 元素。

<form action="/form/submit" method="POST">
  <input type="email" class="emailField" placeholder="info@onitroad.com" name="email" />
</form>

日期：2020-06-02 22:14:56 来源：oir作者：oir