HTML/CSS登录注册表单切换动画失效 表单内容无法正常切换问题求助

问题原因与修复方案 #

1. 核心问题：类名拼写不匹配

你在CSS中定义表单容器样式用的类名是.input-group（单数形式），但HTML中两个form标签的class属性写的是input-groups（复数形式，多了一个s），导致表单的绝对定位、过渡动画样式完全没有生效，因此修改left值时看不到切换效果。

2. 次要问题：输入框宽度设置不合理

CSS中.input-field的width属性设置为100px，宽度过窄会导致输入框内容显示不全，建议调整为100%适配容器宽度。 #

具体修改步骤 #

1. 修改HTML中两个表单的class属性

<!-- 修改前 class="input-groups"，修改后为class="input-group" -->
<form id="login" class="input-group">
  <input id="usernameL" type="text" class="input-field" placeholder="Userid" required>
  <input id="passL" type="text" class="input-field" placeholder="password" required>
  <input type="checkbox" class="chech-box"><span>Remember Me</span>
  <button type="submit" class="submit-btn">Login</button> 
</form>
<form id="signup" class="input-group">
  <input id="usernameSP" type="text" class="input-field" placeholder="Userid" required>
  <input id="emailSP" type="email" class="input-field" placeholder="Email" required>
  <input id="passSP" type="text" class="input-field" placeholder="password" required>
  <input type="checkbox" class="chech-box"><span>I agree to terms and conditions</span>
  <button type="submit" class="submit-btn">SignUp!</button> 
</form>

2. 修改CSS中输入框的宽度配置

.input-field{
  width: 100%; /* 原值为100px，修改为100% */
  padding: 10px 0;
  margin: 5px 0;
  border-left: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #999;
  outline: none;
  background: transparent;
}

完成以上两处修改后，表单切换动画即可正常运行。

内容的提问来源于stack exchange，提问作者Cruel