输入类型电子邮件与具有相同 css 类的其他输入元素的行为不同 [重复]答案

【问题标题】：Input type email not behaving same as other input elements with same css class [duplicate]输入类型电子邮件与具有相同 css 类的其他输入元素的行为不同 [重复]
【发布时间】：2020-04-29 09:24:57
【问题描述】：

我有一个表单包裹在一个div中，每个表单元素和输入元素都有一个类.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>

表单容器类：

  /* 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 类：

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

【问题讨论】：

标签： html css class rendering

【解决方案1】：

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

/* 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;
}

【讨论】：

【解决方案2】：

.form-container input [type=email]

请注意，您在 input 和 [type=email] 之间有一个空格。

修复它应该没问题

【讨论】：

【解决方案3】：

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

.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;
}

【讨论】：