输入类型电子邮件与具有相同 css class 的其他输入元素的行为不同

Question

我有一个包裹在 div 中的表单，每个表单元素和输入元素都有一个 class .form-container

 <div class="form-popup" id="myForm">
  <form method = "post" action="<?php echo $_SERVER['PHP_SELF'];?>" class="form-container">
    <h1 style="color: white;">Login</h1>

    <label for="name" style="color: white;"><b>Username</b></label>
    <input type="text" placeholder="Enter username" name="name" required>

    <label for="email" style="color: white;"><b>Email</b></label>
    <input type="email" placeholder="Enter email" name="email" required> 

    <label for="psw" style="color: white;"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="password" required !important>

    <button type="submit" class="btn">Login</button>
    <button type="submit" class="btn cancel" onclick="closeLogInForm()">Close</button>
  </form>
</div>

表单容器class:

  /* Full-width input fields */
.form-container input[type=text], .form-container input[type=password], .form-container input [type=email]{
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

由于某些原因，只有持有 type="email" 的输入元素没有呈现为其他输入元素，尽管 .form-container class 已应用：

在类型为 text 或 password 的表单中输入任意数量的输入元素都可以正常工作。那么是什么导致了这种意外的渲染？

Answer 1

您的电子邮件选择器中有一个 space。

.form-container input[type="text"],
.form-container input[type="password"],
.form-container input[type="email"] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

Answer 2

只需检查您的 CSS，您就会发现您的样式表 中有错别字 。在你定义 input [type=email] 的地方，input 和 [type=email] 之间有一个不必要的 space，所以你应该这样写：

/* Full-width input fields */

.form-container input[type=text],
.form-container input[type=password],
.form-container input[type=email] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

注意：如果你想让你的所有输入都影响你的风格，你可以简单地执行以下操作（我强烈建议你这样做）：

/* Full-width input fields */

.form-container input {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

Answer 3

.form-container input [type=email]

请注意，您在输入和 [type=email] 之间有一个 space。

修复它应该没问题

输入类型电子邮件与具有相同 css class 的其他输入元素的行为不同

Input type email not behaving same as other input elements with same css class

html

css

rendering

class