时间戳

首页 > 解决方案 > HTML表单中文本输入类型的CSS不起作用

html - HTML表单中文本输入类型的CSS不起作用

问题描述

我有以下用于 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字段看起来应如此。

这是我看到的一个片段

请指教。谢谢你。

标签： htmlcss

解决方案

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

专注于文本输入时，您缺少添加样式的:focus方法。input[type=text]

改变

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>

推荐阅读