HTML表单中文本输入类型的CSS不起作用[重复]答案

【问题标题】：CSS for text input type in HTML form not working [duplicate]HTML表单中文本输入类型的CSS不起作用[重复]
【发布时间】：2021-03-21 21:22:45
【问题描述】：

我有以下 HTML 表单的 CSS：

input[type=text], input[type=password]  {
  transition: height 0.4s ease-in-out, width 0.4s ease-in-out, background 0.4s ease-in-out;
  padding: 18px;
  height: 20px;
  width: 150px;
  border-bottom: 2px solid #FFD800;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  background-color: #E2E2E2;
  color: dimgray;
}   
input[type=text], input[type=password]:focus {
  height: 30px;
  width: 200px;
  animation-name: smooth;
  background-color: #FFD800;
  animation-duration: 0.5s;
  animation: smooth 0.5s forwards;
  color: black;
}

<div class="body">
  <form action="" autocomplete="off" method="POST">
    <br><br><h2 align="center">Login</h2><br>
    <input type="text" placeholder="Username" name="Username"><br><br>
    <input type="password" placeholder="Password" name="Password"><br><br>
    <input type="submit" value="submit" name="submit">
  </form>
</div>

但是，只有 password 字段看起来应该如此。

Here is a snippet of what I see

请指教。谢谢。

【问题讨论】：

您还有其他影响文本输入的 CSS 声明吗？

标签： html css

【解决方案1】：

欢迎来到 Stack Overflow 和很棒的第一个问题，包括代码。

您在关注文本输入时缺少 input[type=text] 上的 :focus 来添加样式。

改变

input[type=text],
input[type=password]:focus

到

input[type=text]:focus,
input[type=password]:focus

它会起作用的。

工作示例：

input[type=text],
input[type=password] {
  transition: height 0.4s ease-in-out, width 0.4s ease-in-out, background 0.4s ease-in-out;
  padding: 18px;
  height: 20px;
  width: 150px;
  border-bottom: 2px solid #FFD800;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  background-color: #E2E2E2;
  color: dimgray;
}

input[type=text]:focus,
input[type=password]:focus {
  height: 30px;
  width: 200px;
  animation-name: smooth;
  background-color: #FFD800;
  animation-duration: 0.5s;
  animation: smooth 0.5s forwards;
  color: black;
}

<div class="body">

  <form action="" autocomplete="off" method="POST">

    <br><br>
    <h2 align="center">Login</h2><br>
    <input type="text" placeholder="Username" name="Username"><br><br>
    <input type="password" placeholder="Password" name="Password"><br><br>
    <input type="submit" value="submit" name="submit">

  </form>

</div>

【讨论】：